移动Web开发实践

Posted 2020-09-17 wzjhoutai

移动设备的高速发展给用户带来了非常大的便利。用户使用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设置字体大小