2

我正在使用 JavaScript 片段根据浏览器窗口的宽度设置视口元标记的内容参数。该脚本几乎完成了它应该做的事情：它将任何大屏幕设备的初始缩放值设置为 1，将纵向模式下的 iPad 设置为 0.5，对于屏幕宽度小于 700 像素的任何设备，设置回 1。但是，它似乎忽略在横向模式下为 iPad 分配的值：0.75。我怀疑我在横向模式下错误地设置了宽度的条件。我正在使用 (width <1100 && width >= 900) （计算 iPad 的 1024px 分辨率并为类似屏幕尺寸的其他设备提供额外的堤坝） - 但在我的 iPad 上以横向模式将页面缩小到 0.5（应用下一个条件）。

问题：需要进行哪些修改才能使其在横向模式下适用于 iPad？

这是片段：

<script type="text/javascript">

var width = screen.width; 
var meta = document.createElement("meta");
var head = document.getElementsByTagName("head")[0];

if (width >= 1100) {  
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=1");
    head.appendChild(meta);
} else if (width < 1100 && width >= 900) { // iPad in landscape mode
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=0.75");
    head.appendChild(meta);
} else if (width < 900 && width >= 700) { // iPad in portrait mode
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width, initial-scale=0.5");
    head.appendChild(meta);
} else if (width <700) { // anything smaller than 700px in width 
    meta.setAttribute("name", "viewport");
    meta.setAttribute("content", "width=device-width; initial-scale=1; maximum-scale=1");
    head.appendChild(meta);
};

</script>
4

0 回答 0