浅谈开发手机网页的注意事项

2011 1 15 11:33 PM 8346次查看

分类：Web 标签：iPhone

之前一直没有智能手机，因此也没法全面测试我的博客。今天针对iPhone 4修改了下手机页面，于是把经验记录下来。

  1. 最重要的一点就是文字一定要足够大，不要让用户进行缩放才能看清正文。
    iPhone 4的的屏幕分辨率是640×960，大多数的电脑显示器的横向分辨率都只是它的2～3倍，但物理宽度却是它的4倍以上，这也就意味着iPhone上的像素点比电脑显示器上要小很多。
    或者更精确地说，Mac上的默认DPI是72，PC上是96，iPhone 3GS是163，而iPhone 4是326（横向比较像素大小时仍计算成163）。因此不做调整的话，iPhone将会很难看清针对电脑屏幕设计的网页。

    实际上iPhone的Safari浏览器也考虑到了这个问题，因此会自动对字体大小进行调整，避免太小了而不方便浏览。但这也造成了一个问题：medium字号会比large和larger显示得更大，你得用x-large来表示大号字体。
    解决办法就是禁用自动调整：
    body {-webkit-text-size-adjust: none;}
    或者干脆用px作单位。

    此外还要注意别让横向分辨率过大，因为Safari会自动把横向分辨率当成980像素来进行缩放，这样虽然能较完整地显示网页，但却使文字变小了。
    我的处理方法是在head元素里加上这段代码：
    <meta name="viewport" content="width=device-width"/>
    而在切换成横屏时，屏幕也会自动放大，可以将maximum-scale设为1来禁止这个行为，但也会导致用户无法自行缩放。
    Safari还支持一些其他的meta，详细情况可以去看Safari的Supported Meta Tags文档。
  2. 第二重要的就是便于用户点击链接。
    触摸屏操作和鼠标操作有很大的不同，鼠标可以轻松点击和选择，而手指却没法精确地点击一块区域。因此，为了避免误操作，必须让链接足够大，且相互之间有足够的间距（可以通过设定line-height、height、padding和margin来达到这个目的）。
    苹果的建议是可点击区域不要小于44×44像素。Google Reader的feed是33像素高，item是70像素高，使用中明显感觉到后者比前者更适合点击，所以我认为每个可点击区域的高度在60像素以上时比较合适。不过考虑到设备之间的DPI差异，可能用pt、cm、in作单位更好。
    除了链接，checkbox、radio button和button等控件也需要这样设置。
  3. 为各种设备设置不同的样式表。
    iPhone Safari支持CSS Media Query，可以用这种方式引入样式：
    <link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet"/>
    值得一提的是，iPhone 4的横向分辨率虽然超过480px，但仍然可以正常载入。

    但如果要区分iPhone 3GS和iPhone 4的话，就需要用到-webkit-min-device-pixel-ratio了：
    <link media="screen and (-webkit-min-device-pixel-ratio:1)" href="iphone3.css" type="text/css" rel="stylesheet"/>
<link media="screen and (-webkit-min-device-pixel-ratio:2)" href="iphone4.css" type="text/css" rel="stylesheet"/>
    这个东西指的是屏幕的densities，可理解为精细程度，越高则越精细。Android上只允许设为0.75、1和1.5，可见它是达不到retina的程度的。
  4. 利用触摸屏。
    触摸屏的操作方式使得iPhone Safari事件与电脑上的浏览器不同，详情可见Handling Events文档。
    里面的说明很详细，甚至可以用来做一个相当于鼠标手势的玩意。
    如果要让用户无法移动viewport，可以捕捉ontouchmove事件，让它调用event.preventDefault()。
    iPhone上没有hover，但是点击链接时仍可以配合active伪类。
  5. 添加主屏幕图标。
    电脑上的浏览器可以把网站添加到收藏夹里，并显示它的favicon图标（16×16像素，256色）。而iPhone上则可以添加到主屏幕，而且可以显示一个57×57像素的真彩图标。不过如果不进行设置的话，Safari只会将当前页的截屏保存为图标。
    要自定义的话，可以做一个该大小的图标，命名为apple-touch-icon.png，并放在网站根目录下。iPhone会自动为其添加高光效果，如果不需要该效果的话，保存为apple-touch-icon-precomposed.png即可。
    此外，iPhone 4支持114×114像素的图标，iPad支持72×72像素，需要用meta标签来设置：
    <link rel="apple-touch-icon" sizes="114*114" href="/apple-touch-icon-iphone4.png"/>

2条评论 你不来一发么↓ 顺序排列 倒序排列

    向下滚动可载入更多评论，或者点这里禁止自动加载。

    想说点什么呢？