移动端网页开发

本文主要从两个方面讲解移动端网页开发:1.针对移动设备设计与优化;2.跨浏览器的兼容性。还有一篇移动端友好指南。

针对移动设备设计与优化

与台式机和笔记本相比,移动设备有很大不同:1.屏幕尺寸更小;2.有portrait和landscape下自动切换;3.地理位置定位等等。

多种尺寸屏幕体验

响应式网页设计使你的网站在不同屏幕下获得很好的用户体验,通常来说体现在屏幕尺寸和屏幕方向。它包含如下技术:

  • 弹性化网页设计,在不同的尺寸下面顺畅体验。
  • 使用media query根据不同的屏幕尺寸加载不同的css。

viewport meta tag能以最优的方式来显示你的站点到用户设备上。

使用触摸屏幕

DOM Touch事件能使你更好的了解触摸屏工作原理,不会使用到css:hover伪类,同时应该设计易点击的按钮,因为手指比鼠标大一些。具体参考designing for touch screens

优化图片

为了帮助那些使用低网速和高价格的带宽的用户,你可以使用css来判断屏幕宽、高和分辨率,来加载合适的图片尺寸。

你可以使用gradients和shadows来达到视觉效果,以此来替代图片。

手机API

最后,你可是利用移动设备提供的优势,例如orientation和geolocation。

###跨浏览器开发###

书写跨浏览器代码

创建的网站会在不同的移动浏览器上浏览:

  • 避免使用特定浏览器的特性,例如带前缀的属性

  • 若想使用这些特性,检查一下其他浏览器有没有实现这些特性

  • 若其他浏览器没有实现此特性,应该找个替代方法。

例如:如果在一些文字上面使用渐变来实现背景,通过-webkit-linear-gradient,最好也要引入其他浏览器是如何实现渐变背景的。如果你不这样做,最少也得使背景色和字体颜色有反差。最起码此页面还是能在没有实现渐变特性的浏览器上可以浏览的。

特性列表:Gecko-specific properties WebKit-specific properties,以及table of vendor-specific properties

使用css lint,可以帮助你发现代码中的问题。

使用用户代理嗅探

使用上面介绍的技术来获取具体设备的特点例如屏幕的尺寸和touch screens,并且对应适配这是最好的。但有时这很不实际,网站解析浏览器版本以此来区分台式机、平板、手机,来输出不同的内容。

如果你这样做,确保你的算法是正确的,同时因为你不可能知道所有浏览器的版本,所以你有可能分发出不适用于那个设备的内容。查看 guide to using the user agent string to determine device type

在多种浏览器上测试

在多种设备上测试你的网站,意味要在多平台上测试:至少iOS和Android。

分享到: