iOS 设备的网页兼容

07.25.2011, UI Design, by .

这个结合了自己这两个多月的工作所以遇到的问题,以及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:本站已经启用这个缓存列表来加速网站访问了。使用过程中发现本地缓存这东西还是有些问题,下次再说了。

20 Replies

  1. francis says:

    突然发现滚动条变了?不是一般的难用啊 😕

    Reply

    1. xu.hel says:

      你用 WebKit 内核的浏览器浏览当然是这样的了。因为还在调整呢。

      Reply

  2. ffadfsafsda says:

    据说HTML5作的收费应用很难上iphone,不知道是不是真的…

    Reply

  3. 西门 says:

    博主你好,最近我也在研究智能手机网页开发。我觉得同时引用两个css文件来判断横屏竖屏不好,何不用
    @media screen and (orientation:portrait) {}
    @media screen and (orientation:landscape) {}
    这样来判断呢?把横屏竖屏的代码都写到一个CSS里就行了,就不会出现闪屏的情况。
    还有,不建议在手机浏览器里展示太多的图片特效,小弟拙见。 🙂
    希望以后多多交流

    Reply

  4. Andy says:

    請问知道怎样才能将我的CSS 只提供 “portrait” 看, 而不提供 “landscape” view ? 万分感谢! 😯

    Reply

    1. xu.hel says:

      在 landscape 的样式表里面隐藏或者给个提示信息。

      Reply

  5. gyh says:

    这个方法支持IOS4.3.3版本吗

    Reply

  6. gyh says:

    IOS4.3.5以上都没有问题,但是4.3.3以下的我没测过,不知道有问题没

    Reply

    1. Xu.hel says:

      和固件版本无关,只和设备有关。

      Reply

  7. ELi Lien says:

    Safari Mobile是支持fixed的,在屏幕上滑动移动的是viewport,fixed的内容位置不变,所以并不是说Safari Mobile不支持fixed,只是fixed的元素不是相对手机屏幕固定的。 :mrgreen:

    Reply

    1. Xu.hel says:

      看来你没有在 iOS 4.3.3 以下的版本测试过吧。

      Reply

      1. ELi Lien says:

        额、、 那倒是噢、、

        Reply

  8. 手机网页 | yan's blog says:

    […] HTML5 CSS3 预研总结文档 iOS 设备的网页兼容 为视网膜显示屏优化网页上的图片 分类: […]

    Reply

  9. Ryan says:

    请问怎样可以做到在使用浏览器浏览时,自动弹出一个气泡提醒将站点添加至主屏幕!见很多网站都是这样做了,可不知道如何实现!求教!谢谢

    Reply

    1. Xu.hel says:

      用CSS定位层来做

      Reply

  10. Mac says:

    为什么我设置的启动画面不能显示?
    图片是640*920 PNG 8位通道
    代码:
    设备 :iPhone4s
    😳

    Reply

    1. Xu.hel says:

      要PNG-24 的才行

      Reply

  11. Ryan says:

    博主,有个问题请教一下。我参考你文章中介绍的方法,将我的博客也修改一下。定义了启动图片,状态栏样式,主屏幕图标以及全屏样式。可这样后,我打开博客中的链接会自动跳转使用Safari打开,不知道有没有办法让他不跳转,直接打开?

    Reply

  12. bbis says:

    学习了,要用在自己的网页上

    Reply

  13. ken says:

    博主,有个问题请教一下。我写了一个页面,ios点击input的时候,弹出了键盘,然后键盘将整个网页平移上去了,我用的了absolute定位,top为0的,怎么能解决这个问题呢?Andorid下面可以正常使用…

    Reply

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据