【学习笔记】移动Web手册（PPK力作）

又是好久没写博客了，最近把近半年的总结，全部总结到博客园吧。先写最近的一个移动端的学习笔记。毕竟移动端开发了一段时间，就写一写读《移动web手册》中，对我感触比较深的几个点——

一、浏览器相关

1. 浏览器的类型——内置浏览器、可下载浏览器、代理浏览器以及webview。这里的代理浏览器是指服务端进行对页面的渲染，把结果发送给客户端进行显示，比较少见。

2. 内置浏览器的升级——大多数内置浏览器都被紧密集成到底层的操作系统中，也就是说，无法单独升级浏览器。因此，为了得到新的Safary版本，你必须升级IOS。

3. 解释WebView——WebView是留给原生应用的一个操作系统浏览接口。苹果不允许在IOS设备上安装其他渲染引擎。（其他平台是可以的）因此，其他浏览器要想在IOS上安装就必须用苹果的WebView。IOS上的Chrome就是这样的，同样的还有Opera Coast。大体上，WebView是独立的程序，用了内置浏览器很多底层的组件（比如渲染引擎），但是在其他方面可能会有所不同。如果希望你的页面能在WebView里跑起来的话，你最好在WebView上测试一下。

4. 手机上的WebKit——先列出不使用WebKit的浏览器：

1. IE Mobile使用Trident
2. Opera Mini使用Presto，但是最终会换成Blink
3. Chrome浏览器用Blink
4. Firefox Mobile和Firefox OS使用Gecko
5. UC Mini、Nokia Xpress还有Jolla的Sailfish OS上的内置浏览器也用的是Gecko

任何没在上面提到的浏览器都用WebKit。乍一看，这么多浏览器都用WebKit的事实对于Web开发者似乎是一个强大的支持，不幸的是，一个浏览器用Webkit并不意味着它跟其他任何基于Webkit的浏览器一样。实际上，它们有很大的不同，依赖于操作系统、键盘、鼠标还有触屏交互。平台所有者必须提供所有这些功能。

所以，手机上没有WebKit。很多浏览器用着差不多一样的渲染引擎但是在细节上却大不相同。你最好在所有不同的基于WebKit的浏览器上测试你的网站。

5. 测试Android浏览器——对于Android设备的浏览器，有三个必须测试的浏览器：

1. 安卓WebKit4，富含不同的设备和不同版本的安卓系统。一个专门的设备实验室需要大概6到8个这样的来自不同厂商的设备。一个小型实验室必须拥有2到3个：三星、HTC和一个其他厂商的设备
2. Google Chrome。如果你的设备上没有，下载一个。
3. 三星Chrome（三星字Galaxy S4发布以来，三星开始使用他自己开发的基于Chromium的一款浏览器作为内置浏览器，因此出现三星Chrome）。你讲需要购买一个2013年获以后发布的三星高端手机——类似Galaxy S4或更新的设备

 

二、视口相关

1. css像素和设备像素——一个css像素相当于多少个设备像素取决于屏幕的特性（是否是高密度）和用户进行的缩放。用户放大得越大，一个css像素覆盖的设备像素越多。当在使用css和javascript的时候，你并不在意一个css像素跨越了多少个设备像素。你开心地讲这个依赖于屏幕特性和用户缩放程度的复杂计算交给了浏览器。这就是为什么css像素是专门为我们Web开发者创造的一个抽象层。

2. 布局视口：CSS布局会根据它来计算，并被它约束。在手机上，为了容纳为桌面浏览器设计的网站，默认的布局视口宽度远大于屏幕的宽度。

<!-- width属性设置布局视口的宽度为特定的值 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">

3. 视觉视口：它是用户正在看到的网站的区域。用户可以缩放来操作视觉视口，同时不会影响布局视口，布局视口仍保持在原来的宽度。视觉视口与设备屏幕一样宽，并且它的CSS像素的数量会随着用户缩放而改变。

4. 理想视口：对于特定设备上的特定浏览器的布局视口的一个理想尺寸，用户刚进入页面时不再需要缩放，拥有最理想的浏览和阅读的宽度

5. 设备像素比：设备像素个数和理想视口的比，成为设备像素比（Device Pixel Ratio），简称DPR。在js中可以使用window.devicePixelRatio来获取

6. meta标签：meta视口标签存在的主要目的是让布局视口的尺寸和理想视口的尺寸匹配。

7. 视口尺寸度量：document.documentElement.clientWidth/Height返回的是布局视口的尺寸，被普遍支持。window.innerWidth/Height返回视觉视口的尺寸。接近被普遍支持。screen.width/height返回理想视口的尺寸。有很严重的浏览器兼容性 问题。

 

三、性能相关

1. css过度和动画——它们的问题不在浏览器，而在设备，浏览器对两者的支持都很好。但是为了达到非常平滑的效果，浏览器必须借助设备GPU的计算能力。在高端智能手机上不成问题，但对于早期和廉价的手机来说，它们可能根本没有响应的硬件和系统API。这就导致最终的动画效果很生硬。所以，只要你使用了过度和动画，就在你能找到的最老、最差的设备上进行测试。

 

最后附上这本书的封面图片——