68

デバイスの幅が450px を超える限り、Web ページのビューポートの幅をデバイスの幅と等しくしたいと考えています。

次の 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を使用しています)。

4

7 に答える 7

39

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.quirksmode.org/mobile/tableViewport.html

于 2013-02-23T21:07:07.830 に答える
5

他の回答にある 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>
于 2016-12-06T20:55:18.793 に答える
5

@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;
    }

}

もちろん、中間サイズも可能です...

ここに別の例があります

于 2013-02-23T12:47:55.243 に答える
1

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

body {
  min-width: 450px;
}

Chrome for Android でいくつかのテストを行ったところ、viewport width が 以外に設定されている場合、一部の要素のフォントが拡大されdevice-widthます。またshrink-to-fit=yes、最初にページをズームアウトすると便利です。

最後に、このアプローチは、奇妙なウィンドウ サイズまたは現在のズーム設定 (どちらも報告されたビューポートのサイズに影響を与える) を持つ可能性があるデスクトップ ブラウザーをサポートしますが、ビューポート メタ タグを尊重しません。

于 2017-12-06T00:46:09.727 に答える