调整布局以改变屏幕方向答案

【问题标题】：Adapting layout to changing screen orientation调整布局以改变屏幕方向
【发布时间】：2012-11-22 23:26:39
【问题描述】：

我是自适应/响应式 Web 开发的新手。当设备的方向发生变化时，我对移动设备如何处理屏幕分辨率的变化感到困惑。

如果我创建两个媒体查询 - 一个用于 320（纵向），一个用于 480（横向），则 iphone 仅加载 320 版本，无论方向如何，都只会缩放以填满屏幕。

当 iphone 以横向位置加载时，或者当 iphone 从纵向倾斜到横向时，有没有办法提供新的 480 样式？

【问题讨论】：

【解决方案1】：

首先，媒体查询有一个你可能发现的属性

@media all and (orientation:portrait) { … }
@media all and (orientation:landscape) { … }

您可以通过

在 iPhone 上强制渲染

<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0">

然后使用一些 css 来定位横向模式

@media screen and (min-width: 321px){
  //styles
}

【讨论】：

【解决方案2】：

CSS 媒体查询在从一个设备到另一个设备的方向上有点棘手。您仍然有一个很好的 js 选项：

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

function changeOrientation() {
if (orientation == 0 || orientation == 180) {
  //portraitMode
}
else {
  //LandscapeMode
}

【讨论】：

这个答案解决了我遇到的一个不同但相关的问题。纯粹在 CSS 中完成，从全屏横向更改为纵向（iPad 2）有一个奇怪的效果，即背景在第一次时不会一直延伸到底部。 i44.tinypic.com/5a5bhj.jpg你必须旋转回横向然后再次纵向才能工作。