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

【问题标题】：iPhone/iPad viewpoint changes on portrait and landscapeiPhone/iPad 视角在纵向和横向上的变化
【发布时间】：2013-09-20 10:57:41
【问题描述】：

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

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

有什么想法吗？

谢谢

【问题讨论】：

标签： javascript html ios orientation metadata

【解决方案1】：

看看CSS definition of a media query.

@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”>

【讨论】：

但这意味着为纵向和横向创建新的 css 文件并调整所有内容的大小等。我已经使用的脚本运行良好，我只是想知道是否有一个 navigator.userAgent.match 可以选择如果设备处于横向或纵向，则向上，以便我可以随方向改变比例。
您不需要创建新文件，这只是您如何分离样式的示例。您还可以在我的答案的... 部分中指定缩放比例。