how to set viewport so it is 380x800 or 800x380 depending on orientation?

Question

The meta tag "viewport" lets me set up the initial scale for a website, but this can get weird if the user then flips the orientation of the device.

For example, if I set the scale to be 800x380 and the user opens the website in portrait mode, this scale is obviously wrong, and when the user rotates 90deg, the website ends up being more like 1650 wide.

How would I set a viewport such that if the device is landscape to begin with, it's 800x380, and if it's portrait to begin with, it's 380x800?

thanks for the comments so far. None of them answer the question I'm trying to ask, though. providing separate sheets for all possible combinations is just not the right answer in this case, when it's possible to set a preferred resolution. — Kae Verens, Apr 19 '12 at 13:30
I was able to fix this myself by setting the viewport to one value in the HTML, then updating it using JavaScript if the screen size changed. I now have my 380x800 app displaying properly on a screen which is naturally more like 768x1368, /without/ needing to write a load of extra stylesheets — Kae Verens, Apr 19 '12 at 13:31
Android can scale natively developed apps automatically using the methods I outlined in my answer. In this case I think the question is more web development and probably shouldn't carry the android tag since this question applies to all web development targeting a mobile audience. From what I'm getting you're bringing up your website in a browser on a mobile device and want to alter the WEBSITE, not the "app." Sorry if that's wrong, just suggesting because lots of mobile web developers could use info like this and the android tag is confusing. — El Duderino, Apr 19 '12 at 15:11
I also added the phonegap tag. It's an application. It just happens to be written using HTML and JavaScript. It does not exist on a web server. — Kae Verens, Apr 19 '12 at 16:25
You could use phonegap to deploy the same html5 and JS to ios, that doesn't mean it's an "android" development question; in fact it's really only a phonegap development question since native android developers don't use html5/JS (web) development and the phonegap wrapper. Not trying to be a jerk, just saying it confused me so it will probably confuse other developers that don't use a wrapper but design layouts in android. Your definition of "app" is pretty loose. — El Duderino, Apr 19 '12 at 21:00

score 1 · Accepted Answer · answered Apr 20 '12 at 11:24

To detect orientation change, attach an event listener to the window:

window.addEventListener('orientationchange', updateOrientation, false);

In the updateOrientation function you can detect which orientation the device is in and reset the viewport attributes accordingly:

function updateOrientation() {
  if (!(navigator.userAgent.match(/iPhone/i)) && !(navigator.userAgent.match(/iPod/i))) {
    return;
  }

  var viewport = document.querySelector("meta[name=viewport]");

  switch (window.orientation) {
    case 0: //portrait
      //set the viewport attributes to whatever you want!
      //For Ex : viewport.setAttribute('content', 'width=device-width, initial-scale=1.0, user-scalable=1;');
      break;
    case 90: case -90: //landscape
      //set the viewport attributes to whatever you want!
      break;
    default:
      //set the viewport attributes to whatever you want!
      break;
  }
}

this is as close to the answer as I'm going to get, I think! thanks — Kae Verens, Apr 20 '12 at 13:20

score 0 · Answer 2 · answered Apr 17 '12 at 21:58

You shouldn't be setting the "scale" of your application like this. You should strive to make your apps scale independent by using the units that allow for different screen densities. Try using "dp" as a unit and arranging your layouts so they make sense independent of scale.

The way layouts have to be built in android is one of the more challenging aspects of developing on the platform for me. Sorry this isn't technically an answer but because android runs on so many devices (tablets, phones, other devices) you really should take advantage of both density independent units and the folders for resolution scaling (your high-density, medium-density, and low-density folders in drawable.)

However, you can detect orientation on startup (onCreate() or onResume()) and then load the appropriate layout from your resources. You'd have to keep two copies of all your layouts though (one for horizontal and one for vertical orientations.) You'd also have to configure your orientation changes to trigger the layout changes as well.

score 0 · Answer 3 · answered Apr 19 '12 at 07:17

Use media queries for different screen sizes and orientation.

    <html>
      <head>
        <meta name="viewport" content="width=device-width; height=device-height; user-scalable=no; initial-scale=1; />
        <link rel="stylesheet" href="main_portrait.css" type="text/css" media="all and (orientation:portrait)">
        <link rel="stylesheet" href="main_landscape.css" type="text/css" media="screen and (max-width:500px) and (orientation:landscape)">
        <link rel="stylesheet" href="main_landscape_big.css" type="text/css" media="screen and (min-width: 501px) and (orientation:landscape)">
        <script type="text/javascript" charset="utf-8" src="cordova-1.6.0.js"></script>
        <script type="text/javascript" charset="utf-8" src="main.js"></script>
      </head>
      <body onload="init();"></body>
    </html>

First stylesheet link applies on all devices in portrait mode.
Second stylesheet applies on devices with maximal width 500px when orientation is landscape
and last stylesheet applies on devices with width bigger then 500px and orientation landscape.

You can add more stylesheets for each combination you want.

Here is documentation to media queries: W3C Media Queries
and good tutorial: How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

how to set viewport so it is 380x800 or 800x380 depending on orientation?

3 Answers3

Linked