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

问题

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?

回答1:

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;
  }
}

回答2:

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.

回答3:

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

来源：https://stackoverflow.com/questions/10199495/how-to-set-viewport-so-it-is-380x800-or-800x380-depending-on-orientation

标签

android

html5

cordova

viewport