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

Answer 2

Try this:

<meta id="vp" name="viewport" content="width=device-width, initial-scale=1"> <script> window.onload = function() {     if (screen.width < 450) {         var mvp = document.getElementById('vp');         mvp.setAttribute('content','user-scalable=no,width=450');     } } </script> 

Note that I have swapped the initial-scale=1, as I think you had it the wrong way round. You want initial-scale to be set to 1 when width=device-width, so that the page fits exactly in the window. When you set a specific viewport width, you don't want to set initial-scale to 1 (otherwise the page will start off zoomed in).