iPhone / iPad視點在縱向和橫向上發生變化

Question

我正在嘗試使用單獨的元視點數據來調整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>

並且運作良好。 唯一的問題是，在將設備也設為縱向/橫向時，我還需要縮放比例。

有任何想法嗎？

謝謝

Answer 1

看一下媒體查詢的CSS定義。

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

例如，您可以根據設置縮放比例的方向使用不同的樣式表：

<link rel=”stylesheet” media=”all and (orientation:portrait)” href=”css/portrait.css”>
<link rel=”stylesheet” media=”all and (orientation:landscape)” href=”css/landscape.css”>