I would like my webpage's viewport width to equal device-width as long as device-width > 450px, or 450px otherwise (my layout dynamically scales, but doesn't look good below 450px wide).
The following two meta tags work well on tablets, where the device-width > 450px:
<!-- uses device width -->
<meta name="viewport" content="width=device-width" />
<!-- use of initial-scale means width param is treated as min-width -->
<meta name="viewport" content="width=450, initial-scale=1.0" />
however, on phones (where e.g. device-width=320px) the former is too thin for the content; and the latter causes the browser to zoom in, so the user has to manually zoom out to see the content.
Alternatively, this meta tag works well on phones
<meta name="viewport" content="width=450" />
but doesn't take advantage of the extra width available on tablets.
Any help/ideas would be really appreciated (and if it makes a difference, I'm using GWT).
So you want to change the viewport
tag's width dynamicaly .
Here you go :
<meta id="myViewport" name="viewport" content="width = 380">
<script>
window.onload = function () {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=580');
}
</script>