Meta Viewport Just on Portrait

Viewport for ipad portrait [only]

I had a similar issue just now, on a site that is 1550px wide on desktop but only 880px on mobile.

Things were working great with

<meta name="viewport" content="width=880px, initial-scale=1.0, user-scalable=1;" />

combined with

<link rel="stylesheet" media="all" href="/css/base.css" />
<link rel="stylesheet" media="(max-width:880px)" href="/css/mobile.css" />

(mobile.css readjust some element widths to fit nicely into the 880px mobile layout.)

Things looked good until I tested it on an iPad in the iOS Simulator. In portrait things looked alright, but in landscape orientation some elements (specifically those with width: 100%) adjusted to the viewport width, while some didn't (that one element with width: 1550px). This meant that when scrolling right (or zooming out) to view the entire 1550px element, the elements with width: 100% were left dangling from the left side, only about half as wide as they should be.

The solution was far from obvious, but here's how I solved it:

base.css

body{
    width: 100%;
    min-width: 1550px; 
}

mobile.css

body{
    min-width: 100%; 
}

This explicitly sets the miniumum width of the body element to 1550px for all devices wider than 880px, including tablets that take the viewport meta tag into account.
When viewed on a mobile device with a width less than 880px, the width of the body element is reset to simply 100%, i.e. the viewport width.

Hope this will help someone out there struggling with different layouts for different devices.

How do I change initial-scale based on portrait or landscape mode (and orientation change)?

You can use window.matchesMedia along with the orientationchange event on the window.

const meta = document.createElement('meta');
meta.name = "viewport";
if (window.matchMedia("(orientation: portrait)").matches) {
   meta.content = "width=device-width, initial-scale=0.5";
} else {
   meta.content = "width=device-width, initial-scale=1.0";
}
document.head.appendChild(meta);
window.addEventListener("orientationchange", function() {
  if(window.orientation == 0){
     meta.content = "width=device-width, initial-scale=0.5";
  } else {
     meta.content = "width=device-width, initial-scale=1.0";
  }
}, false);

HTML5 Viewport meta tag not working on android phone in portrait mode

Try using maximum-scale instead of initial-scale. The maximum scale keeps the scale settings when the user switches from portrait to landscape view.

Like below:

 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>

Or, you may also specify width:

 <meta name="viewport" content="width=360, maximum-scale=1"/>

I guess the below works for iPhone and iPad both

 <meta name="viewport" content="width=720, maximum-scale=1.0" />

or last try

 <meta name="viewport" content="width=device-width, maximum-scale=1.0" />

Besides there are CSS3 media queries too.

Mobile website. viewport width gets stuck going back to portrait

The problem is defining width in the viewport meta tag. When width is set to device-width, the available width will always be the portrait width of the device regardless of orientation. It's seems confusing, but device-width doesn't mean "current available horizontal area", but rather the literally standard screen width of the device.

When width is not specified, Mobile Safari actually assigns device-height as the width in landscape orientation. Again, that may sound counter-intuitive, but we're talking about standard spec width and height in normal, portrait orientation.

Android phones may or may not display a similar behavior. I've been unable to find any confirmation one way or another. However, unfortunately, the width must be specified as device-width on Android to make it work at all.

As a result, your best bet is probably going to be shoring up the behavior with media queries. You can detect the orientation and width of the device and apply styles based on that. For example:

@media all and (device-width: 320) and (orientation: portrait) { ... }
@media all and (device-width: 480) and (orientation: landscape) { ... }

Meta viewport ONLY for phones?

Do you mean this <meta name="viewport">?

<meta name="viewport" content="width=device-width, user-scalable=no" />    

If so, try the following script added in the <head> (taken and adapted from here):

if(navigator.userAgent.match(/Android/i)
  || navigator.userAgent.match(/webOS/i)
  || navigator.userAgent.match(/iPhone/i)
  || navigator.userAgent.match(/iPad/i)
  || navigator.userAgent.match(/iPod/i)
  || navigator.userAgent.match(/BlackBerry/i)
  || navigator.userAgent.match(/Windows Phone/i)) {
    document.write('<meta name="viewport" content="width=device-width, user-scalable=no" />');
}

This will detect if the user-agent indicates that the browser is mobile, and will write that meta viewport as required.

---

Related Topics