Question

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

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

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

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

Answer 2

CSS媒体查询从一个设备到另一个设备的定位有点棘手。你还有一个很好的js选项：

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

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

使布局适应不断变化的屏幕方向

2 个答案: