Script For Assigning Viewport Meta Parameters, iPhone / iPad Conundrum

拜拜、爱过 提交于 2020-01-24 17:05:26

问题


I am using a JavaScript snippet to set the content parameters of the viewport meta tag, based on the width of the browser window. The script does almost what it should: it sets the initial scale value for any large screen device as 1, for iPad in portrait mode as 0.5, and for any devices smaller than 700px in screen width, back to 1. However, it seems to ignore the value assigned for iPad in landscape mode: 0.75. I suspect somehow I incorrectly the conditional for width in the landscape mode. I'm using (width <1100 && width >= 900) (to count for iPad's 1024px resolution and to provide extra levee for other devices of similar screen sizes) - but on my iPad in landscape mode instead shrinks the page to 0.5 (applying the next conditional).

Question: what modifications are necessary to make it work for iPad in landscape mode?

Here's the snippet:

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

来源:https://stackoverflow.com/questions/16565782/script-for-assigning-viewport-meta-parameters-iphone-ipad-conundrum

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!