苹果手机浏览器旋转，苹果手机浏览器页面横竖屏自如？

1. 概述

一些网站在电脑上浏览时是横向设计的，但在手机上浏览时需要纵向展示。苹果手机浏览器为了更好地适应用户的需求，在横竖屏切换时提供了自适应的功能。本文就是要分享当用户使用苹果手机浏览器时，该如何让页面横竖屏自如。

2. 如何自适应

在 iPhone 平台上，系统会自动调整视口比例，把宽度值控制在一个 980 像素左右的范围内，高度由于 WebKit 引擎的自适应能力，可以根据内容的高度自由变化。因此，在编写页面的时候，我们需要做好以下几点：

页面布局要素宽度： 在 iPhone 横屏和竖屏状态下分别大约为 480 与 320 像素左右；

设置viewport 初始值： width=device-width，当然，height=device-height 因为页面高度会根据内容自适应，所以不需要设置，而且 height 100% 在 iPhone 中有点问题；

不要设置最小宽度和最大宽度： min-width 和 max-width：因为在竖屏和横屏切换时，宽度可能同时变化；

不要使用任何 fixed 固定定位的元素： 因为在滚动时会有不必要的麻烦。

3. CSS Media Query

CSS Media Query 是 CSS3 新增的特性，用于针对不同的媒体类型设置不同的样式表。我们可以使用 CSS Media Query 来更好地适应横竖屏切换的需求。

例如：

```

@media only screen and (orientation: portrait) {

/* 竖屏状态下的样式 */

}

@media only screen and (orientation: landscape) {

/* 横屏状态下的样式 */

}

```

4. JavaScript 监听

有些情况下，我们需要 JavaScript 来监听横竖屏的切换事件，并动态的改变页面的布局。以 iPhone 为例，横竖屏切换会触发 window.orientation 的改变，我们可以通过监听该事件来做出相应的操作。

例如：

```

window.addEventListener("orientationchange", function() {

if (window.orientation == 0 || window.orientation == 180) {

/* 竖屏状态下的操作 */

} else if (window.orientation == 90 || window.orientation == -90) {

/* 横屏状态下的操作 */

}

}, false);

```

5. 总结

在苹果手机浏览器上，采用自适应布局，使用 CSS Media Query 和 JavaScript 监听横竖屏切换事件可以使页面在不同屏幕状态下自如地展示。在编写网站时，我们需要考虑到竖屏和横屏的布局，并且通过适当的样式和 JavaScript 监听来完成优化。祝大家在编写网站时能够更好地适应苹果手机的浏览器横竖屏切换功能。

文章TAG：苹果  苹果手机  手机  手机浏览器  苹果手机浏览器旋转