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>