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" />
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>
<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>
