html - Achieving min-width with viewport meta tag

Question

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

Answer 1

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> 

See:http://www.quirksmode.org/mobile/tableViewport.html