1

私のウェブサイトはhttp://independenttruckersgroup.comです。これは、固定幅の非応答ページです。iPhone から表示するときに全画面表示にするにはどうすればよいですか? Windows、iPad、および Android のブラウザ デスクトップでテスト済みです。すべてがフルスクリーンにうまく収まります。しかし、Mac または iPhone でブラウザを使用してテストすると失敗しました。iPhone や Mac のブラウザでは横スクロールが表示されます。

メモの場合、使用している幅は 1903 ピクセルです。デフォルトのiPhoneの幅は980ピクセルです。また、幅が 980 ピクセルより大きい場合、通常は画面に合わせて自動的に縮小されることも読みました。したがって、要素は小さくなりますが、水平スクローラーは表示されません。それが私が達成しようとしていることです。ビューポート メタタグを使用しようとしましたが、うまくいきません。

これに関する助けに感謝します。ありがとう。

4

2 に答える 2

0

代わりに、JS を使用してメタ タグ「viewport」の initial-scale 属性を変更しようとしましたか?

<meta id="viewportElement" name="viewport" content="width=1903"/>
<script type="text/javascript">
    function changeViewportInitialScale() {
        var ratio = 1,
            minWidth = 1903,
            windowOuterWidth = window.outerWidth;

        if (windowOuterWidth < minWidth) {
            ratio = windowOuterWidth / minWidth;
        }
        viewportElement.setAttribute("content", "initial-scale=" + ratio);
    }
    changeViewportInitialScale();
</script>

この最初のスケール変更を含むスクリプト タグは、メタ タグの直後に配置する必要があります。この後、コードのほぼすべての場所でウィンドウのサイズ変更イベントリスナーにアタッチできます。

私にとっては、どのデバイスでも魅力的に機能します。これを試してみました。

于 2015-03-16T11:27:28.807 に答える