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

后端未结

关注

 3  1155

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, i

相关标签:

3条回答

陌清茗

2020-12-20 08:20

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.

0 讨论(0)
发布评论:

提交评论
- 加载中...

一整个雨季

2020-12-20 08:35

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

0 讨论(0)

囚心锁ツ

2020-12-20 08:41

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

0 讨论(0)