最新消息:

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

移动开发 Mars 1388浏览 0评论

最重要的一点就是文字一定要足够大,不要让用户进行缩放才能看清正文。

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文档

第二重要的就是便于用户点击链接。

触摸屏操作和鼠标操作有很大的不同,鼠标可以轻松点击和选择,而手指却没法精确地点击一块区域。因此,为了避免误操作,必须让链接足够大,且相互之间有足够的间距(可以通过设定line-height、height、padding和margin来达到这个目的)。 苹果的建议是可点击区域不要小于44×44像素。Google Reader的feed是33像素高,item是70像素高,使用中明显感觉到后者比前者更适合点击,所以我认为每个可点击区域的高度在60像素以上时比较合适。不过考虑到设备之间的DPI差异,可能用pt、cm、in作单位更好。 除了链接,checkbox、radio button和button等控件也需要这样设置。

为各种设备设置不同的样式表。

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的程度的。

利用触摸屏。

触摸屏的操作方式使得iPhone Safari事件与电脑上的浏览器不同,详情可见 Handling Events文档。 里面的说明很详细,甚至可以用来做一个相当于鼠标手势的玩意。 如果要让用户无法移动viewport,可以捕捉ontouchmove事件,让它调用event.preventDefault()。 iPhone上没有hover,但是点击链接时仍可以配合active伪类。

添加主屏幕图标。

电脑上的浏览器可以把网站添加到收藏夹里,并显示它的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"/>
          

转载请注明:设计资源分享 » 浅谈开发手机网页的注意事项

京ICP备14020976号-3