Question

元标记“viewport”允许我为网站设置初始比例，但如果用户随后翻转设备的方向，这可能会变得奇怪。

例如，如果我将比例设置为800x380并且用户以纵向模式打开网站，则此比例显然是错误的，当用户旋转90度时，网站最终会更像1650宽。

我如何设置一个视口，如果设备开始时是横向的，那么它是800x380，如果是开头的肖像，它是380x800？

Answer 1

要检测方向更改，请将事件侦听器附加到窗口：

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

在updateOrientation函数中，您可以检测设备所在的方向并相应地重置视口属性：

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

Answer 2

您不应该像这样设置应用程序的“比例”。您应该努力通过使用允许不同屏幕密度的单位来使您的应用程序独立扩展。尝试使用“dp”作为一个单元并安排您的布局，使它们有意义，不受规模影响。

必须在android中构建布局的方式是我在平台上开发的更具挑战性的方面之一。对不起，这在技术上不是一个答案，但因为android运行在如此多的设备（平板电脑，手机，其他设备）上，你真的应该利用密度独立单元和分辨率缩放文件夹（你的高密度，中等密度，可绘制的低密度文件夹。）

但是，您可以在启动时检测方向（onCreate（）或onResume（）），然后从资源中加载适当的布局。您必须保留所有布局的两个副本（一个用于水平，一个用于垂直方向。）您还必须配置方向更改以触发布局更改。

Answer 3

对不同的屏幕尺寸和方向使用媒体查询。

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

第一个样式表链接适用于纵向模式下的所有设备当方向为横向时，第二个样式表适用于最大宽度为500px的设备最后一个样式表适用于宽度大于500px和方向横向的设备。

您可以为所需的每种组合添加更多样式表。

以下是媒体查询的文档：W3C Media Queries
和好的教程：How To Use CSS3 Media Queries To Create a Mobile Version of Your Website

如何根据方向设置视口，使其为380x800或800x380？

3 个答案: