responsive-design - 调整布局以改变屏幕方向

Question

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

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

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