2

JavaScript スニペットを使用して、ブラウザー ウィンドウの幅に基づいてビューポート メタ タグのコンテンツ パラメーターを設定しています。このスクリプトは、ほとんど必要な処理を実行します。大画面デバイスの初期スケール値を 1 に設定し、ポートレート モードの iPad の場合は 0.5 に設定し、画面幅が 700 ピクセル未満のデバイスの場合は 1 に戻します。ランドスケープ モードの iPad に割り当てられた値 0.75 を無視します。どういうわけか、ランドスケープモードでの幅の条件が間違っていると思われます。私は (幅 <1100 && 幅 >= 900) を使用しています (iPad の 1024 ピクセルの解像度をカウントし、同様の画面サイズの他のデバイスに追加の堤防を提供するため) - しかし、横向きモードの私の iPad では、代わりにページを 0.5 に縮小します (適用次の条件)。

質問: ランドスケープ モードの iPad で動作させるには、どのような変更が必要ですか?

スニペットは次のとおりです。

<script type="text/javascript">

var width = screen.width; 
var meta = document.createElement("meta");
var head = document.getElementsByTagName("head")[0];

if (width >= 1100) {  
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=1");
    head.appendChild(meta);
} else if (width < 1100 && width >= 900) { // iPad in landscape mode
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=0.75");
    head.appendChild(meta);
} else if (width < 900 && width >= 700) { // iPad in portrait mode
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=0.5");
    head.appendChild(meta);
} else if (width <700) { // anything smaller than 700px in width 
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width; initial-scale=1; maximum-scale=1");
    head.appendChild(meta);
};

</script>
4

0 に答える 0