the-mobile-web-handbook

浏览器

1.手机上有四种浏览器类型:内置浏览器、可下载浏览器、代理浏览器、webview。

大多数内置浏览器都被紧密集成到底层的操作系统中,,无法单独升级浏览器。

webview是留给原生应用的一个操作系统浏览接口。(webview是属于操作系统的)

苹果不允许在ios设备上安装其他渲染引擎,所以其他浏览器想要在ios上安装就必须使用苹果的webview。

总体来说webview是独立的程序,用了内置浏览器很多底层组件(比如渲染引擎)。

2.代理浏览器

用户在代理浏览器上访问一个地址,http请求会被代理浏览器接受,但是不会进行常规的http请求,而是将请求发送到代理服务器上,有代理服务器再请进行常规的http请求,请求得到html、css、javascript。代理服务器上有渲染引擎,会将请求到的资源进行渲染绘制,最后压缩成类似一张pdf,并带有链接锚点,和简单的javascript事件,代理服务器将这张图片再返回到代理浏览器上。

通过这种方式代理浏览器得到一张完整的页面只用一个http请求。节省了大量的带宽,提升的速度。

3.渲染引擎

手机上4个重要的渲染引擎:

  • Gecko
  • Trident
  • Webkit
  • Blink

Blink是从WebKit中分离出来的。

除了ios,大部分浏览器使用webkit作为渲染引擎。但是

  • IE Mobile使用Trident
  • Chrome 使用Blink
  • Firefox Mobile 和Firefox OS使用Gecko

重点说明webkit是一个渲染引擎,不是浏览器,会提供一个渲染完成的页面,但不包含真正把渲染的页面显示在手机屏幕上的模块。一个浏览器使用webkit作为渲染引擎并不意味着它跟任何其他基于webkit的浏览器一样。

安卓

谷歌提供免费的安卓操作系统给多个手机设备厂商,设备厂商为了差异化,对内置浏览器做了修改。所以相同版本的内置浏览器还是会有区别。

原始的安卓提供了他自己基于webkit的浏览器,没有名字,可以成为安卓webkit,我们也可以称呼它会安卓内置浏览器。

在最开始的时候,所有安卓设备都将安卓webkit作为内置浏览器,只有安卓系统更新时才会更新它。最新的安卓内置浏览器的版本是4.3。

blink是为html和css设计的渲染引擎,通常与v8 javascript引擎配合。blink与人人都可下载修改的谷歌开源浏览器chromium紧密的结合在一起。chrome是谷歌自己对chromium的一个实现。

如何确认安卓设备的内置浏览器?若navigation.userAgent中包含chrome可能是chrome或者是改自chromium的chrome。否则就是安卓webkit。

视口

像素

一个像素就是计算机屏幕能显示一种特定颜色的最小区域。

设备像素

设备屏幕的物理像素,任何设备的物理像素的数量都是固定的。

css像素

为web开发者创建的,在css(javascript)中使用的一个抽象的层。

三大视口:

布局视口、视觉视口、理想视口

理想视口是对特定设备上的特定浏览器的布局视口的一个理想尺寸。

分辨率

设备每英寸内点的个数。

设备像素比

设备x轴像素个数和理想视口的宽的比值。

css

overflow-scrolling

在Safari和某些浏览器上,没有实现平滑的滚动效果,这是因为受到处理器的限制,节省电量。但是手动设置了-webkit-overflow-scrolling: auto 会使设置了可滚动的块级元素实现平滑的滚动效果。

触摸和指针事件

touchstart、touchmove、touchend和pointerdown、pointermove、pointerup事件在同一时刻触发。

鼠标指针总是指着某一个像素,而手指触控会覆盖很多像素点。通常系统会从这些像素点计算出一个中心点作为触摸事件的坐标。

触摸事件级联

用户触摸动作触发的一系列事件。

下列事件在用户轻触某个元素时触发:

1
2
3
4
5
6
7
8
- touchstart/pointerdown
- touchend/pointerup
- mouseover
- mousemove
- mousedown
- mouseup
- click
- :hover

具体的顺序因浏览器而异。大体上讲就是当手指头轻触屏幕时,给以上事件写了事件绑定函数的都会触发事件。

触摸事件级联中最重要的当属click事件了,以下操作都会触发click事件:

1
2
3
4
- 按下鼠标按钮
- 轻触屏幕
- 点击按钮提交表单、
- 点击链接

在桌面浏览器上,click事件只有当mousedown和mouseup在同一个像素触发后才会触发click事件。

剖析触摸事件

触摸事件对象有三种touchList数组属性:

  1. touches 当前触摸屏幕的触摸点数组,即使触摸点不在绑定事件的元素内,是屏幕内的当前所有触摸点形成的数组。
  2. changedTouches 导致触摸事件触发的触摸点数组。
  3. targetTouches 事件目标元素上的触摸点数组。

touchmove离开元素

如果在某个元素上绑定了touchmove事件,手指从元素移到了元素外,touchmove还是会持续触发,touchend不会触发。

阻止默认行为

1
2
3
return false
e.preventDefault()

click

  1. a链接不跳转
  2. 表单不提交

touchstart

  1. a链接
  2. 滑动阻止了滚动条滚动
  3. 双触不会缩放
  4. click、鼠标的事件级联

touchmove

  1. 阻止scroll