IOS下的Safari的一些特性

IOS下的Safari的一些特性

1. viewport

iOS Sarari 浏览器允许网页 Head 里存在一个 Viewport 声明，用来规范浏览器对此页面的缩放特性，完整的声明如下：

<meta name="viewport" content="width=device-width,
 initial-scale=1, minimum-scale=1, 
maximum-scale=2, user-scalable=no" />

Viewport 里目前有五个可以设置的属性，它们各自的作用如下：

• width：设置 viewport 的宽度，即 iPhone 最初模拟 PC 浏览器的宽度，之后 iPhone/iPad 会这个宽度展现的页面同比缩放到 iPhone/iPad 屏幕上。设置 width=device-width 后就不会再进行缩放了，因为宽度正好和 iPhone/iPad 的宽度相同（前提是没有设置缩放比例）。
• minimum-scale 和 maximum-scale：是控制用户允许设置的最大/最小缩放比例的。
• user-scalable：标识是否允许对页面进行缩放，取值有两个 yes 和 no。设置为 no 则不允许进行页面缩放了。
• initial-scale：设置页面的初始化缩放比例。

通过控制这个，将网页的主体内容扩展到整个界面，能够给用户更好的阅读体验。

2. 横竖屏切换。

Mobile Safari for iPad 可以直接在 link 或者 style 标签的 media 属性里声明该样式是竖屏的还是横屏的。可以利用来在横竖屏下面做一些不同的内容布局。

/* 竖屏时使用的样式 */
<style media="all and (orientation:portrait)" type="text/css">
#landscape { display: none; }
</style>
 
/* 横屏时使用的样式 */
<style media="all and (orientation:landscape)" type="text/css">
#portrait { display: none; }
</style>