iOS 设备的网页兼容

这个结合了自己这两个多月的工作所以遇到的问题，以及HTML5 的一些新特性来做一些应用上的介绍。

给 iOS 设备定制页面

其实只要网页已经使用了 HTML5 的标准来构建的网页，只需为 iOS 准备CSS 样式表文件就可以解决这个问题了。就像这篇文章里面的效果一样。没有使用任何相关的插件来实现。

iOS 设备都有一个特性那就是支持重力感应，屏幕的内容会随着设备在手里面的方向状态进行屏幕分辨率的宽度自适应。SO，浏览器在 CSS 的解析上就有了横竖两种分辨率的判断。不过 iPad 和 iPhone 的支持上又是有点区别的。Android 的也支持这个，不过 Android 详细的情况，由于本人没有测试的机器就无法做说明了。

CSS 在用在移动设备上网页的 link 链接的代码上面要做一些修改，需要修改一下 media 属性。
由于 iPhone 的横竖屏的判断是通过最大宽度来判断的代码，那么 CSS 链接的媒体检测代码要做如下修改了，代码如下：

<link rel=”stylesheet” type=”text/css” media=”screen and (max-width:320px)” href=”iphone.css” />
<link rel=”stylesheet” type=”text/css” media=”screen and (min-width:321px)” href=”iphone_landscape.css” />

max-width:320px 限制了屏幕的最大宽度为 320，也就是 iPhone 竖屏状态下的屏幕宽度。
min-width:321px 限制了屏幕的最小宽度为 321， 由于竖屏的时候屏幕宽度为 320 了。不可能变成 321，那么一旦屏幕检测的时候发现宽度大于 320 了，那就会自动判断为横屏状态。
不过，在实际的应用中发现 iPhone 4 在处理网页的时候竖屏分别率宽度是 320×480，而不是 640×960 的分别率。也就是说网页上iPhone 和 iPhone 1～3 代的分别率是一致的。所以在设计 iPhone 4 专用网页的使用只需按照竖屏 320×480 和横屏 480×320 的分别率设计就行了。
iPad 下做判断就方便很多了，iPad 没有使用屏幕分辨率来做检测，而是直接使用了媒体检测中的 orientation 属性，代码如下：

<link rel=”stylesheet” type=”text/css” media=”screen and (orientation:portrait)” href=”ipad.css” />
<link rel=”stylesheet” type=”text/css” media=”screen and (orientation:landscape)” href=”ipad_landscape.css” />

orientation 是用于屏幕方向检测的属性。直接使用就行了。orientation:portrait 表示竖屏，orientation:landscape 横屏。这样就没有什么好说的了。
不过貌似这两种方法 Android 都支持，无论固件是 2.3 的还是 3.0 的。
另外 media 属性里面的 screen 是指屏幕设备，也可以用 all 代替，all 指所以设备。不过不推荐这样用。
横竖屏的状态判断搞定了，那么接下来就是 CSS 样式的编写了。 由于 iOS 和 Android 使用的都是 WebKit 的内核，那么就可以放肆的使用 CSS 3.0 的属性来渲染页面了。
既然都是 WebKit 内核了，应该就没有什么差异存在了。但是还是要注意一个问题，那就是 position 属性了，代码如下：

position:fixed;

这个代码没什么问题啊。是的，看起来问题的。这是个会让定义了这个属性的元素以一种绝对的位置固定在屏幕上，不会被页面滚动影响的。但是这个在 iOS 下面失效了。
Why？ 我也不知道为什么。反正就是失效了。背景图片的 fixed 定位在 iOS 下也会失效，貌似只要是和 fixed 有关的都会失效。估计这个和 Safari Mobile 版有关系了。
要是横竖屏都各用两个 CSS 文件那么在切换的时候会出现一个闪屏的问题，其实这是浏览器在切换 css 是产生的渲染替换问题。解决这个问题的方法就是在编写横屏的 CSS 文件的时候，先引用竖屏的 CSS 文件然后在竖屏的 CSS 基础上做 CSS 样式覆盖的调制。比如宽度的调整。类似这样：
竖屏样式 (portrait.css) 内容：

div{width:768px;}

横屏样式 (landscape.css) 内容:

@import url(“portrait.css”);
div{width:1024px;}

这样横竖切换的时候感觉就流畅很多了。

网页 iOS 桌面图标

Safari Mobile 版有个挺有意思的功能就是可以把当前网页添加到 iOS 的桌面作为一个程序图标显示。界面如下：

也就是这个 “添加至主屏幕” 的功能，这个应该是叫 Web 剪辑吧。
添加至主屏幕过后就会在主屏幕上生成一个用网页微缩图作为图标的 APP 图标。点击后会打开添加的网页。其实可以利用这个功能做个网站的快捷方式了。也可以把网站模仿成一个 Web App 来使用了。
要模仿就要添加几个东西，一个是添加桌面图标、启动画面和隐藏 Safari 的工具条和地址栏。
添加桌面图标的方法就用 iOS 特有的代码了。代码如下：

<link rel=”apple-touch-icon” href=”apple-touch-icon.png” />

图标的尺寸推荐 114px X 114px 的矩形 PNG 图片，圆角和高光效果是 iOS 自动添加上去的。
如果你不想要自动添加的圆角和高光效果，那么可以用下面的代码：

<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon.png” />

这样点击过后还是会出现一个和屏幕尺寸一样的网页的截图，那么就需要添加一个启动画面来替换了，代码是：

<link rel=”apple-touch-startup-image” href=”screen.png” />

这部分代码是从 iOS 的开发网站上找到的。不过貌似只支持竖屏的启动图片。 启动画面的图片规格要和 屏幕的尺寸一样，只是高度要减去 状态栏的高度也就是 显示电池信号那栏的高度。比如 iPhone 的启动画面的图标尺寸为 320×460， iPhone 1～3代和 iPad 的 状态栏高度为 20px。，而 iPhone 4 为 40px，那么启动画面 iPhone 4 的尺寸应该为 640×920。iPad 为 768×1004。这个也是 iOS App 启动画面的尺寸规格。
加上这两个图片和你就发现这个和一个原生的 APP 程序基本一样了。只是为什么打开的时候还是有地址栏和底部的工具栏呢？那就还需要添加这行代码，把快捷方式打开的页面全屏化。代码如下：

<meta name=”apple-mobile-web-app-capable” content=”yes” />

这个就是把网页作为 Web App 的 meta 属性了，同样还可以添加一个状态条的样式 meta 属性，让自己定义状态条样式。这个的代码如下：

<meta name=”apple-mobile-web-app-status-bar-style” content=”black” />

apple-mobile-web-app-status-bar-style 的 content 值为 3个，分别为 default (默认)、black (黑色)、black-translucent (黑色透明)。和原生 iOS App 上面的定义一致。
有时候页面里面的一串数字会被浏览器自动判定为电话号码，点击后就可以直接呼叫出去。为了避免这个还需要加上下面的屏蔽代码：

<meta name=”format-detection” content=”telephone=no”>

这下这个网页通过添加至主屏幕后就像一个真正的 App 出现在 iOS 的主屏幕上面了。但是细心的还是会发现，为什么字体会被缩小很多呢。这个是 Safair Moblie 版的自动缩放适应特性了。没有了这个你就不能使用那个很酷的缩放手势来放大页面了。既然是要做一个移动设备上的网页那么就要干掉这个特性了。那就要禁用自动缩放了，还是要使用 meta 便签来搞定，代码在这里：

<meta name=”viewport” content=”minimum-scale=1.0,maximum-scale=1,width=device-width,user-scalable=no” />

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

• width：设置 viewport 的宽度，即 iOS 模拟 PC 浏览器的宽度，之后 iOS 会这个宽度展现的页面同比缩放到屏幕上。设置  width=device-width 后就不会再进行缩放了，因为宽度是指定使用设备的屏幕宽度。
• minimum-scale 和 maximum-scale：是控制允许用户缩放操作的最大和最小缩放比例。
• user-scalable：标识是否允许用户对页面进行缩放操作，取值有两个 yes 和 no。设置为 no 就不允许进行页面缩放操作。

这样就像一个 Web App 的网页了。不过要注意的是这里提道的 link 和 meta 标签都需要放在 <head></head> 里面。
如果你不喜欢这种上面提到的全屏模式，而是只想隐藏掉地址栏那么用这个JS代码就行了：

<script type=”application/x-javascript”>
addEventListener(‘load’,function(){setTimeout(scrollTo,0,0,1);},false);
</script>

注意 type 是 application/x-javascript 而不是 text/javascript。不过这段 JS 代码只在 iPhone 里面有效。
使用 HTML5 构建的页面还可以在浏览器启用 HTML5 的本地缓存列表来缓存一些资源文件在浏览器的本地缓存里面，这样可以达到加速浏览的目的。
Web App 用上了这个本地缓存列表，那么就可以在离线的状态下使用了。
PS:本站已经启用这个缓存列表来加速网站访问了。使用过程中发现本地缓存这东西还是有些问题，下次再说了。