iPhone/iPad 在纵向和横向上的视点变化

iPhone/iPad viewpoint changes on portrait and landscape

本文关键字：横向 视点 变化 iPad iPhone      更新时间：2023-09-26

我正在尝试使用单独的元视点数据为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>

而且它工作得很好。 唯一的问题是，当设备被制成纵向/横向时，我需要比例不同。

有什么想法吗？

谢谢

看看媒体查询的 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”>
相关文章：