web-dev-qa-db-ja.com

ビューポートメタタグで最小幅を達成する

私のウェブページのviewport widthと等しいdevice-widthdevice-width> 450pxまたはそれ以外の場合は450pxが欲しい、ただし幅が450ピクセル以下では見栄えがよくありません）。

次の2つのメタタグは、デバイス幅が450pxを超えるタブレットで適切に機能します。

<!-- uses device width -->
<meta name="viewport" content="width=device-width" />

<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />

ただし、電話（device-width = 320pxなど）では、コンテンツに対して前者が薄すぎます。後者の場合、ブラウザがズームインするため、ユーザーはコンテンツを表示するために手動でズームアウトする必要があります。

あるいは、このメタタグは電話でうまく機能します

<meta name="viewport" content="width=450" />

しかし、タブレットで利用可能な余分な幅を活用していません。

任意のヘルプ/アイデアは本当に感謝されるでしょう（そしてそれが違いを生むなら、私はGWTを使用しています）。

htmlgwtmedia-queriesmeta
58
Tom G

したがって、viewportタグの幅を動的に変更する必要があります。

どうぞ ：

<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
    var mvp = document.getElementById('myViewport');
    mvp.setAttribute('content','width=580');
}
</script>

参照： http：//www.quirks mode.org/mobile/tableViewport.html

37
Suresh Atta

これを試して：

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
    if (screen.width < 450) {
        var mvp = document.getElementById('vp');
        mvp.setAttribute('content','user-scalable=no,width=450');
    }
}
</script>

「initial-scale = 1」を交換したことに注意してください。これは間違った方法で行ったと思うからです。 width = device-widthのときにinitial_scaleを1に設定して、ページがウィンドウに正確に収まるようにします。特定のビューポートの幅を設定する場合、初期スケールを1に設定する必要はありません（それ以外の場合、ページはズームインして開始されます）。

16
CpnCrunch

@mediaタグとcssを使用します。それは驚異的に機能します。ビューポートに最小限の幅を提供するわけではありませんが、これが望ましい方法です。

ビューポートに対して私がすることは次のとおりです。

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

次に、viewPortに接続されているパネルのサイズを調整します。

@media all and (max-width: 1024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

明らかに中間サイズもあります...

別の例で詳しく説明します

5
user1258245

他の回答にあるJavaScriptコードはFirefoxでは機能しませんが、メタタグを削除して新しいタグを挿入すると機能します。

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

または、常にJavaScriptに挿入するだけです。

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

私の正気のために、ポリフィルを書いてmin-widthビューポートメタタグの属性：

ビューポートメタタグで最小幅を設定

これにより、次のことができます。

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>
3
Brendan Long

つまり、ビューポートでmin-widthを設定する必要はありません。代わりにbodyまたはhtml要素で設定して、ビューポートよりもコンテンツを広くすることができます。ユーザーはコンテンツをスクロールまたはズームアウトできます。

body {
  min-width: 450px;
}

Chrome for Androidでテストを行いました。ビューポートの幅がdevice-width以外に設定されている場合、一部の要素のフォントを拡大します。 shrink-to-fit=yesは、最初にページをズームアウトするのに役立ちます。

最後に、このアプローチは、奇妙なウィンドウサイズまたは現在のズーム設定（どちらもレポートされるビューポートのサイズに影響する）を持つことができるデスクトップブラウザーをサポートしますが、ビューポートメタタグを尊重しません。

1
Andrew Svietlichnyy