移动web手册-读书笔记

veizz大约 9 分钟

在微博上看到裕波有推荐这本，而恰好某东搞活动，就买了一本。刚收到货的时候，发才居然只有188页，算了一下，一页0.289元。于是就跟小伙伴们说，读一本三毛钱一页的书，是一种怎么样的体验？

第一章，移动世界

主要讲移动运营商，移动设置生产商，以及一些移动操作系统相关的东西，对移动web有一些介绍。其中关于合约机的说明很有意思，说明了移动运营商推出一款服务产品时的本意。对关于移动设备市场份额的强调，也要注意。

要注意自己所在市场的设备市场份额。不要被高大上的其它区域的数据所误导。不同区域的数据没有太大的可参考性。我觉得最真实的数据还要从自己服务器上的日志去分析，针对性的处理。当然如果web页面可以兼容所有的设备，那是最好不过。

嗯，第一章有大约30页，我觉得值10块钱。不亏。

第二章，浏览器

ppk给浏览器做了一个分类：内置浏览器，可下载浏览器，代理浏览器，webview。内置的特点是系统自带不可删除，可下载就是第三方的，webview就是各种应用内的webview，相当于应用内置浏览器吧。

代理浏览器比较有意思，我所遇到的就有uc，operamini, chrome都有代理的功能。是指在用户访问一个页面的时候，浏览器会使用代理来请求。这个代理会预先加工处理这个页面，做一些文件压缩，图片缩放之类的操作以节省流量，做一些css预先渲染之类的操作以节省客户端资源。在处理javascript的时候，会有明显的不同。这就造成开发后的页面跟在手机上的表现不一样。而这种代理通常没有一种统一的规律。特别是对于javascript的操作。所以在开发时，要针对不同的浏览器，查阅对应的官方文档，以解决不能正常表现的问题。

另外，虽然android使用的基本上都是webkit浏览器，但是不同的手机的webkit版本可能不一致，一些细节也不一致，所以对于有严格要求的应用来讲，需要在多个浏览器上测试（虽然都是系统自带的）。

使用浏览器赚钱有很多方式。因为，浏览器是上网的一个入口。书中提到三种：出售浏览器公司，出售浏览器使用许可（预装给os），跟搜索引擎合作。然而现在，浏览器的附加功能越来越多，有预置的书签快捷方式，可以排位赚钱。浏览器也可以推送新闻消息。浏览器也可以注入广告等。每个浏览器都会做hao123在做的事情，真是醉了。

第三章，安卓。

主要说了不同android系统下的默认浏览器，和chrome浏览器的现状。

主要传达一种思想：不要以为webkit测完就完了，不要以为chrome测过就完了。有很多版本的webkit, 很多版本的chrome。厂商如三星，可能做自己的chrome——基于chrome开源版。

第四章，视口。viewport

苹果创造了viewport, 其它公司复制了它。但是当前还没有标准文档。w3c相关的文档当前处在讨论中，还没定稿。http://dev.w3.org/csswg/css-device-adapt/
pc上，一个像素就是一个屏幕上的一个最小单元。但在移动设备上，一个像素可以对应多个单元。因为要适配移动设备屏幕大小，视网膜屏等，一些浏览器会做一些缩放。
浏览器支持的viewport的width最大值是10000，一般都不会达到这个值
在旋转的时候，安卓的大多数浏览器，理想视口的宽度会改变。但ios的safari不会改变。猜是因为改变之后引起的页面重绘需要花费很多的计算资源。
minimum-scale, maximum-scale。android的webkit默认的范围是25%~400%，即缩放因子是4，且不可修改。而在文档中（我猜是apple的文档）中，当不指定的时候，默认缩放范围是20%~500%,即缩放因子是5.在修改的时候，支持到的范围是10%~1000%。
关于媒体查询，所有的媒体查询都需要一个媒体类型，通常使用all较好。因为当前有用的就只有print,其它的还需要考察。在使用媒体查询的时候，一般使用min或者max前缀。因为一般只关注一个范围。元素宽度一般是像素px。其它的单位未有说明。

  @media all and (max-width:400) and (orientation:portrait) and ((max-resolution:144dpi), (-webkit-max-device-pixel-ratio:1.5)){
      /*
      只有在布局视口不超过400px，设备处于竖屏模式，并且devicePixelRatio小于等于1.5的时候才会生效
      */
  }

device-width和device-height, 对应javascript的screen.width, screen.height.这些属性有可能是理想窗口的尺寸，也有可能是设备像素的数量。如iphone5, 理想窗口是宽度320，但设备像素数量是640。
em表现并没有期望中的那么好。有些浏览器不支持字体大小的缩放。
device-pixel-ratio, js中对应的window.devicePixelRatio, 是设备物理像素和设备独立像素比例。1px在设备上用几个最小显示单位来表示。（-webkit-device-pixel-ratio, -webkit-=min-device-pixel-ratio）
转向，在css中有orientation, js中是screen.orientation(chrome中). 对应的事件有orientationchange, window.addEventListener('orientationchange', function(){}); 注意：deviceorientation是手机的运动就会触发的。不是屏蔽旋转。
resize事件不要轻易使用，safari在增减dom元素的时候都会触发resize事件。而有些状态栏改变的时候，等。在不同的浏览器上差异太大。

第五章：CSS。

1、移动端好多问题的原因是定义中未明确区分viewport。像position:fixed。因为未指明是相对于哪个viewport做fixed,所以在一些浏览器上面会不一致（在手机上缩放一个网页的时候，顶部会不会被缩放到页面外？）。如vh, vw这两个单位。 2、对于不缩放的页面，应该可以使用position:fixed（嗯，是我猜的）。 3、overflow-auto不太适合移动设备，或者需要测试之后再使用。 4、background-attachment, 这个属性好多浏览器都没实现，感觉也不是很必要用。 5、:active, :hover在移动设备上，因为没有鼠标，而手指的相关操作会挡住页面。所以可以使用其它的方式。有个技巧，同时使用:active和:focus， :focus在移动端可以很好的工作，所有浏览器都支持。 6、过渡和动画尽量少用，会严重影响页面性能，这些东西浏览器有实现，依赖设备gpu做处理。对于低端机来讲，会卡。而有时候资源不够用的时候效果也不好。所以应当少用或者不用。

第六章：触摸和指针事件

1、移动设备为了兼容传统web网页，所有的浏览器都会处理click相关事件。可以放心使用，推荐使用。 2、touchstart, touchmove, touchend, touchcancel(这是个什么鬼事件) 3、鼠标事件冒泡：safari的鼠标事件只在特定情况下会冒泡到document.(当目标元素是一个链接或者表单域，当目标元素或其祖元素显式包含鼠标事件处理函数，当目标元素或者其祖元素包含cursor:pointer的css声明) 4、click的300毫秒。因为在移动设备上，双击屏幕会缩放网页大小。所以为了确定一个事件是click而不是缩放事件，采用了这种方式。等300毫秒看看会不会有下一次点击。在一些浏览器上，可以通过一些方式来取消缩放，从而取消300毫秒延迟。如chrome可以添加：<meta name="viewport", content="width=device-width">，IE可以通过touch-action:manipulation这个css设置。 5、移动上触发click事件的时候，在touchstart和touchend之间，允许手指移动4到20个像素。而pc上不允许鼠标移动。 6、主要是介绍了指针事件这一种在未来可能用得到的事件，和它的设计思路。

第七章：成为移动web开发者

1、比较全面的测试需要比较多种类型的设备。可以逐渐积累，也可以租借设备等。 2、http://opendevicelab.com/上面可以在全球范围内找到很多开放设备实验室，但是国外的服务国内不好用。 3、3g不一定比wifi慢。一个常见的场景就是：在酒店的wifi速度慢的要死。 4、使用浏览器特性测试（if (window.xxxx){}）有时候并不好用，有的浏览器声称支持某属性，但它其实并不支持。有的浏览器支持mp4的视频播放，但是它播放视频的时候有一堆问题。有一些现有的项目可以帮助检测手机浏览器的类型和浏览器的功能。如WURFL，DeviceAtlas, whichbrowser.net等 5、有一些工具，可以让电脑上的操作同步发生在手机上，这在开发测试的时候会非常有用。如ghostlab, adobe edge inspect等。 ps, adobe edge inspect并不好用，不能处理用户输入。好像是只处理url

6、补充一句，对移动端浏览器进行测速这是没有意义的。移动过程中网络环境会发生变化。。。