最小幅767pxのデザインが届きました。デザインは幅のあるテキストが多少混雑しており、このテキストは背景に合わせて調整されています。デバイスの最小幅と最小値を設定する方法
私はこの767pxデザインを利用可能な最小のものにするための最良の方法は何かを尋ねました。低い幅は垂直スクロールバーを受け取るべきではありませんが、そのデバイスの最初の負荷で最小幅に拡大縮小する必要があります。
私は、メタビューポートタグを調整してこの問題を解決しようとした：
<meta name="viewport" content="width=device-width, min-width=767px, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
しかし、私がしたいように動作するようには思えません。何か案は？
私は、より詳細な検索をした、と私はhttps://www.brendanlong.com/setting-a-minimum-viewport-width-for-responsive-pages.htmlここで必要なものを発見しました：
var MIN_WIDTH = 767;
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < MIN_WIDTH) {
viewport.setAttribute("content", "width=" + MIN_WIDTH);
} else {
viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
画面幅がビューポートメタタグを用いて調整される767px未満である場合、これは、私は必要なものexacltyありませんcontent = "width = 767" 画面幅が767pxで、初期ロード時のページを100％に縮小し、正しいズームレベルに調整したデバイス
<meta name="viewport" content="width=device-width, initial-scale=1.0">
このコードは、あなたのhtml文書の<head>一部内にある必要があります。 はこのコードを使用し、your_class_nameをクラス名で置き換えます。
@media only screen and (max-width: 768px) {
/* For mobile phones: */
.your_class_name {
width: 100%;
}
}
これはうまくいきます。
あなたはフィドルを投稿してもう少し説明できますか？ – Roysh