调整布局以适应屏幕方向的变化

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
}