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>