CODEWITHSUNDEEP
htmlgwtmedia-queriesmeta
Tom G
Tom G

Reputation: 2045

Achieving min-width with viewport meta tag

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

Upvotes: 72

Views: 82996

Answers (7)

CpnCrunch
CpnCrunch

Reputation: 5061

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

Upvotes: 27

Mikey
Mikey

Reputation: 1

I just removed initial-scale=1 and perfectly working on Android Chrome and built-in browsers. No unexpected zoom anymore! :)

<meta name='viewport' content='width=device-width'>

Upvotes: -2

artsnr
artsnr

Reputation: 1042

Extending @Brendan and other's answer. The viewport size doesn't adjust again on orientation (portrait, landscape) change. To cater this, add an event listener on orientation change and resize again.

<script>
      const resize = () => {
        if (screen.width < 450) {
          var viewport = document.querySelector("meta[name=viewport]");
          viewport.parentNode.removeChild(viewport);
    
          var newViewport = document.createElement("meta");
          newViewport.setAttribute("name", "viewport");
          newViewport.setAttribute(
            "content",
            "width=450, maximum-scale=1.0, user-scalable=no"
          );
          document.head.appendChild(newViewport);
        }
      };
      resize();
      window.addEventListener("orientationchange", resize);
</script>

Upvotes: 1

Andrew Svietlichnyy
Andrew Svietlichnyy

Reputation: 761

In short, there is no need to set min-width on viewport because you can set it on body or html element instead, to make them and their content wider than viewport. User will be able to scroll or zoom out content.

body {
  min-width: 450px;
}

I did some tests in Chrome for Android and it scales fonts of some elements up if viewport width is set to anything other than device-width. Also shrink-to-fit=yes is useful to have a page zoomed out initially.

Lastly, this approach supports desktop browsers that can have strange window sizes or current zoom settings (both of which affect reported viewport dimensions), but don't honor the viewport meta tag.

Upvotes: 1

Brendan Long
Brendan Long

Reputation: 54252

The JavaScript code given in the other answers doesn't work in Firefox, but it will work if you remove the meta tag and insert a new one.

<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
if (screen.width < 450){
    var viewport = document.querySelector("meta[name=viewport]");
    viewport.parentNode.removeChild(viewport);

    var newViewport = document.createElement("meta");
    newViewport.setAttribute("name", "viewport");
    newViewport.setAttribute("content", "width=450");
    document.head.appendChild(newViewport);
}
</script>

Or just always insert it in JavaScript:

<script>
var viewport = document.createElement("meta");
viewport.setAttribute("name", "viewport");
if (screen.width < 450) {
    viewport.setAttribute("content", "width=450");
} else {
    viewport.setAttribute("content", "width=device-width, initial-scale=1");
}
document.head.appendChild(viewport);
</script>

For my sanity, I wrote a polyfill to just add a min-width attribute to the viewport meta tag:

Set min-width in viewport metatag

With this, you could just do:

<meta name="viewport" content="width=device-width, initial-scale=1.0, min-width=450" />
<script type="text/javascript" src="viewport-min-width.js"></script>

Upvotes: 5

user1258245
user1258245

Reputation: 3639

use a @media tag and css. It works wonders. Although it does not supply a minimal width to the view port, this is the preferred way to go.

Here is what I do for the viewport:

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes, minimum-scale=1.0, maximum-scale=2.0">

Then I adjust the size for the panel attached to the viewPort:

@media all and (max-width: 1024px) {
    /*styles for narrow desktop browsers and iPad landscape */
       .myContentPanel{
         width: 450;
    }    
}


@media all and (max-width: 320px) {
   /*styles for iPhone/Android portrait*/
      .myContentPanel {
         width: 320;
    }

}

Obviously you can have intermediate sizes too...

here's more in another example

Upvotes: 5

Suresh Atta
Suresh Atta

Reputation: 122008

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

Upvotes: 39

Related Questions