Change viewport tag depending on device width?

Question

Regarding the viewport meta tag, I want to establish different viewports at different screen sizes.

By default, I want the viewport to be "width=1024"
At device widths of lower than 768px, I want the viewport to be "width=device-width,initial-scale=1"

The reason for this is that I want to set a non-fluid layout for tablets that scales when you flip them vertically, but I want a different set of layouts for mobile devices.

How can this be done?

Only way I know would be using javascript to change the viewport properties at certain screen widths/resolutions. See here: quirksmode.org/blog/archives/2011/06/dynamically_cha.html — cjspurgeon
This works, however, I had to make some modifications to be more explicit. The script in the link checks the window width, but that can be deceptive and clumsy when dealing with newer mobile devices. For example, a new iPhone 6 has a larger window width than an iPad 2, despite being a smaller device. Instead, I checked for screen.width and then detected the window orientation and used screen.height if it was landscape. — develdevil

develdevil develdevil · Accepted Answer · 2014-10-23T16:52:15

Using the link that cjspurg posted above as a starting point, I eventually came up with a method to reliably detect the screen width (in CSS pixels) and set the viewport accordingly:

<meta id="testViewport" name="viewport" content="width=1024">
<script>
var sw = screen.width;
var sh = screen.height;
if ( window.matchMedia("(orientation: landscape)").matches ) {
  var fw = sh;
} else {
  var fw = sw;
}
if (fw < 768) {
    var mvp = document.getElementById("testViewport");
    mvp.setAttribute("content","width=device-width,initial-scale=1");
}
</script>

Change viewport tag depending on device width?

1 Answers