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

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

（功能（doc）{
var viewport=document.getElementById（'viewport'）；
if（navigator.userAgent.match（/iPhone/i）| navigator.userAgent.match（/iPod/i））{
doc.getElementById（“视口”）.setAttribute（“内容”，“初始比例=0.3”）；
}else if（navigator.userAgent.match（/iPad/i））{
doc.getElementById（“视口”）.setAttribute（“内容”，“初始比例=0.7”）；
}
}（文件）；

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

有什么想法吗

谢谢

看看

例如，根据可以设置缩放的方向，可以使用不同的样式表：

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

看看

例如，根据可以设置缩放的方向，可以使用不同的样式表：

<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可以识别设备是否处于横向或纵向，这样我就可以随着方向改变比例。您不需要创建新文件，这只是一个如何分离样式的示例。您也可以在我的答案的

…

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

…

部分中指定缩放比例。