1

別のメタ視点データを使用して、iPad と iPhone 用にサイトのサイズを変更しようとしています。

これまでのところ、これは私が使用しているものです：

<meta id="viewport" name='viewport'>
<script>
    (function(doc) {
        var viewport = document.getElementById('viewport');
        if ( navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i)) {
            doc.getElementById("viewport").setAttribute("content", "initial-scale=0.3");
        } else if ( navigator.userAgent.match(/iPad/i) ) {
            doc.getElementById("viewport").setAttribute("content", "initial-scale=0.7");
        }
    }(document));
</script>

そしてそれはかなりうまくいっています。唯一の問題は、デバイスを縦向き/横向きにするときに縮尺を変える必要があることです。

何か案は？

ありがとう

4

1 に答える 1

1

メディア クエリの CSS 定義を見てみましょう。

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

たとえば、スケーリングを設定できる方向に応じて、異なるスタイルシートを使用できます。

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”css/portrait.css”&gt;
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”css/landscape.css”&gt;
于 2013-09-20T11:04:50.170 に答える