1

元标记“视口”让我可以设置网站的初始比例，但如果用户随后翻转设备的方向，这会变得很奇怪。

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

我将如何设置一个视口，如果设备一开始是横向的，它是 800x380，如果它是纵向的，它是 380x800？

4

3 回答 3

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;
  }
}
于 2012-04-20T11:24:00.347 回答
0

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

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

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

于 2012-04-17T21:58:26.670 回答
0

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

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

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

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

这是媒体查询的文档：W3C 媒体查询
和优秀教程：如何使用 CSS3 媒体查询创建网站的移动版本

于 2012-04-19T07:17:54.647 回答