首页 > 代码库 > 移动Web开发实践

移动Web开发实践

移动设备的高速发展给用户带来了非常大的便利。用户使用Android、iPhone和其他移动设备非常easy接入互联网。

移动设备对网页的性能要求比較高。以下就说说Mobile Web开发的一些心得。

Viewport

当你用iPhone訪问一个没有面向移动设备优化过的站点时(最好选取960px宽度的站点)。你会发现iPhone上面刚好能够把整个页面显示出来,可是页面被缩小了许多。字体很小。这其实是Sarari默认把自己当成980px宽度来处理的,而全部iPhone(竖屏)的真实宽度为320px,其实差点儿全部的移动设备都有类似的情况,iPhone的请參考iPhone 5 Display Size and Web Design Tips。这就牵扯到Viewport的概念了。

Viewport是浏览器的可视区域,也是浏览器的宽度,在PC上面问题比較简单,宽度是多少就多少。可是在移动设备上,浏览器尝试去把整个页面都显示出来,所以就会Viewport值不准确的情况。比如上面提到的Safari从iPhone那里获取到宽度是980px(浏览器仅仅能从系统那里获取宽度)。所以我们要做第一件事就是要浏览器用真实的宽度去解析页面,代码例如以下:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

"width=device-width"表示浏览器用它自己真实的宽度,如iPhone上面就是320px,initial-scale=1.0表示默认不进行缩放。

关于Viewport很多其它请參考:Using the viewport meta tag to control layout on mobile browsers

补充一下:设备像素不等于CSS像素,比如用户放大页面300%。CSS像素也跟着放大300%,但设备像素肯定不会有变化。非常多设备为了保证良好浏览效果,一般会告诉浏览器一个假的分辨率,比如iPhone5s的设备分辨率是640x1136,可是却告诉浏览器它的分辨率是320x568(站点要加width=device-width,否则是980宽度),否则真的以640x1136在那点屏幕上进行浏览页面肯定要近视了。

响应式设计

移动设备的分辨率多种多样。这就要求我们要在全部设备上都能非常好的展示。而响应式设计就是非常好的解决方式。BootStrap等框架都号称移动优先,当然缺点是文件比較大,假设站点比較简单的话能够自己用百分比写写就能够了。很多其它响应式设计请參考:响应式设计介绍

图片精度

如今新的手机配置都比較高,绝大部分手机的像素比例(devicePixeRatio)都超过1,iPhone的Retina屏幕的像素比例为2,Nexus5的像素比例为3。

像素比例高的屏幕必需要有高清的图片,这样显示效果才好,比方iPhone5s的竖屏宽度为320px,可是仅仅有使用640px宽度的图片才干完美显示。

我们的开发经验是图片以iPhone5s为标准进行处理,就是在iPhone5s上面必须是高清显示,其他广大Anroid设备上自适应处理。

能够參考:移动Web——CSS为Retina屏幕替换图片

性能相关

  • Zepto.js

    jQuery很强大。可是它的体积比較大。即使是2.x的压缩版也有82KB。

    ZeptoJS号称迷你版jQuery,兼容大部分的jQuery API。它的大小仅仅有24KB,由于它仅仅支持移动浏览器,全部体积小,速度快。

  • Lazy load

    对于移动网页来说。真正消耗流量部分应该是图片部分。由于图片通常都比較大,所以我们能够使用Lazy Load的方式仅仅载入当前屏幕中的图片。由于用户非常多时候仅仅是看一下当前屏幕的内容就跳到下一页了。没有必要一次把全部图片都载入进来。

  • 其他

    为了提高性能和降低下载流量,我们能够压缩合并CSS,JS文件,对图片进行压缩处理,对图标进行合并等。

HTML5 & CSS3

移动设备上的浏览器都是比較新的浏览器,基本上都支持HMTL5和CSS3的新的功能。因此我们应该多使用它们。最起码我们能够使用CSS3的圆角效果来替换图片。以下列出一些很有用的CSS3特性。

  • rem

    CSS经常使用px, pt作为字体单位。可是它们的缺点是它们是绝对值。百分比(%)和em作为字体单位时大小,它们的值是由它们的父元素的字体大小决定的,优点是它的值是动态变化的。缺点是由于每一个元素的父元素的字体大小都不一样,因此各个em的大小也不一样。终于导致统一设置字体大小。

    而rem相对于百分比和em来说。它是相对于root 元素的字体大小而不是父元素,这样不论什么一个元素使用rem作为单位时它的參考单位都是一样的。

    这样我们就统一控制整个页面的字体大小了。

    请參考:CSS3的REM设置字体大小

  • 动画

    我们通经常使用JS来实现动画,比方jQuery的animation(),可是JS的性能比較原生的CSS3动画要差非常多。所以能用CSS3实现的动画就用CSS3实现。

參考文档

  • 响应式设计介绍
  • CSS3的REM设置字体大小
  • CSS3的REM设置字体大小

移动Web开发实践