移动Web页面开发

一、移动开发与PC开发网页的区别

1.终端设备及浏览器
2.分辨率
3.视口
4.输入特性（鼠标、键盘或触摸）

二、移动浏览器包括内置浏览器、可下载浏览器、代理浏览器以及WebView

1.内置浏览器

每部手机都有内置浏览器，也就是说这个浏览器属于固件，通常时操作系统厂商开发的。

平台	内置浏览器	备注
ios	Safari
安卓	安桌Webkit或Chrome
黑莓	黑莓Webkit
Windows Phone	IE
塞班	塞班Webkit
Firefox OS	火狐
Sailfish	暂未命名	基于Gecko
S40	在老版本上是S400Webkit，在Asha上是Xpress	Xpress是基于Gecko的代理浏览器
其他功能手机	Opera Mini、NetFront、UC Mini	Opera MiniUC Mini是代理浏览器

大多数内置浏览器都被紧密集成到底层的操作系统中，也就是说，无法单独升级浏览器，例如，为了得到新的Safari版本就必须升级iOS。

2.可下载浏览器

有许多浏览器是用户能够下载并且自行安装的，Opera、Firefox、Chrome、UC就是其中几个重要的浏览器。
可下载浏览器相比内置浏览器有一个优势，就是只要有了新版本就可以更新。最新的和最棒的功能往往最先在可下载浏览器出现，这也是为什么Web开发者趋向与喜欢Chrome、Opera还有Firefox。

3.代理浏览器

代理浏览器相比渲染引擎能够解析和执行HTML、CSS和javaScript。但并不是运行在设备上，而是在远程服务器上。这样做是为了给用户省钱。代理服务器工作的步骤如下：
1.当用户请求一个页面，他不会发送一个普通的HTTP请求，而是通过一个加密连接发送一个特殊的代理服务器。
2.代理服务器会发送正常的HTTP请求给用户希望访问的Web服务器。它会请求HTML，还有所有取得其他资源，如CSS、JavaScript和图片等。
3.代理服务器包括一个渲染引擎，能够正常渲染页面。
4.代理服务器压缩渲染的页面，成为该网站的某种图片，既把它想象成一个PDF或一个图形映射。它有连接热点，而且用户也能选择文本和稍微放大。
5.代理服务器同样通过加密连接把这个文件发送到客户端。
6.客户端把文件展示给客户，如果客户单击连接或这姓一些需要的代码操作，就会重复执行这些步骤。

代理浏览器主要致力于为用户省钱，因为代理浏览器所有要做的事就是显示静态文件，允许单击或轻触连接，生成简单的UI，所以他是轻量级的，甚至可以在低规格的手机上运行，不需要用户购买很贵的只能手机。可是它也有缺点，就是没有客户端交互。虽然它支持Javascript，但是每次用户触发一个Javascript事件，客户端就会发一个请求给服务器以获得下一步指示。服务器执行脚本，如果有必要抓取新的资源，然后返回更新后的页面，对于客户端来说就是一个全新的页面。

4.WebView

WebView事留给原生应用的一个操作系统浏览器接口。例如：在一个Twitter客户端里，当用户单击了feed里的一个连接时客户端可以调起平台的Webview来显示一个网页。
大体上，Web时独立的程序，用了欸之浏览器很多底层的组件，但是在其他方面可能会有所不同。

三、移动开发测试浏览器

1.Emulation

Emulation模拟器中每项的含义及功能如下。

Devuce:可以选择要测试的设备及型号，单击Protrait可以测试竖屏显示的网页，单击Landscape可以测试横屏显示的网页。

Emulate screen resolution:该选项前面有一个复选框，勾选后表示采用Emulation模拟移动网页，不勾选就是不模拟移动环境，一般建议勾选。

Resolution:设备像素

Device pixel ratio:设备像素比

Emulate mobile:模拟移动端特性，一般需要勾选。

Emulate touch screen:模拟移动touch事件，一般需要勾选。

Shrink to fit:以适当尺寸适配，一般需要勾选

2.NetWork cinditions

NetWork cinditions界面中每项的含义及使用方式如下：

Disk cache:磁盘缓存，默认是不缓存的。

Network throttling:网络节流，单击后面的下拉菜单，可以选择不同的网络供开发者测试模拟。

User agent spoofing:用户代理商，可以选择默认代理商，或者自定义代理商。

3.Sensors

Sensors界面中每项的含义及功能如下。

Emulate geolcation coordinates:是否需要模拟地理定位。勾选这个复选框下面的两个选项就会变成可编辑状态。一般这个功能会出现在徐娅地理定位，或是引用地图的时候。
Lat:经度
Lon:纬度

Emulate accelerrometer:模拟陀螺仪。手动改变三个轴上的值，右边小框就会发生旋转。这个功能一般用于摇一摇等重力感应的场景。
α：设备绕Z轴旋转的数值
β：设备绕X轴旋转的数值
γ：设备绕Y轴旋转的数值

其实我们在实际开发的时候不可能同时需要这么多项测试，一般变换设备型号、网络、分辨率等即可。

四、移动端视口

1、移动的三种视口

1-1.布局视口

小屏幕移动设备（甚至大部分平板）的问题是，如果使用宽度和浏览器窗口宽度一样会导致很丑陋的显示效果。移动或平板浏览器通常的宽度为240px~640px，并且大多数设计桌面的网站宽度都大于800px，更多的时1024px。所以我们为桌面设计的宽度为30%的aside在手机上看起来将会非常窄。

1-2视觉视口

虽然独立的布局视口很大程度上帮助了桌面网站过渡到手机上。但我们不能完全忽视移动设备上的屏幕尺寸。 q所以该说明一下视觉视口了。
视觉视口是用户正在看到的网站的区域。用户可以通过缩放来操作视觉视口，同时不会影响布局视口。布局视口还是保持在原来的宽度。

1-3理想视口

布局视口的默认宽度并不是一个理想的宽度。显然用户希望在进入页面时可以不需要缩放就可以有一个理想的浏览和阅读尺寸。理想视口仍是为移动端设备准备的。只有手动添加meta视口标签方才生效。如果没有meta视口标签，那么布局将会维持它的默认宽度。
如下代码，告诉浏览器，布局视口的宽度应该与理想视口的宽度一致。（一般来讲我们都会将布局视口的宽度设为设备宽度一样，然后使用css媒体查询编写一套针对移动端的展示方案。）
<meta name="device" content="width=device-width">
　　定义理想视口是浏览器的工作，不是设备或操作系统的工作。

2、视口标签

meta视口标签存在的目的时让布局是扣的尺寸和理想视口的尺寸匹配，它是苹果发明的，其他的手机和平板复制了它的大部分内容。桌面浏览器不支持它，因为他们没有理想视口的概念。meta视口标签应该放在文旦那个的head标签中，并书写为
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"/>

在WebStorm编辑器中输入meta:vp然后安tab键，就可以生meta视口标签及一些默认属性，一般情况下直接使用这些默认属性，不需要更改.

五、设备像素比

1.使用相对长度单位em布局页面

em是CSS提供的测量类型尺寸
　　源自印刷界，一个em表示一种特殊字体的大写字母M的高度。在网页上，一个em是网页浏览器的基础文本尺寸的高度，它一般情况下是16px。然而，任何人都可以改变这个基础尺寸的设置，因此1em对于有的人来说可能是16px，但是在其他人的浏览器上可能是24px。换句话说，em是一个相对的度量单位。
　　除了浏览器的初始字号设置之外，em也可以从包含标签中继承尺寸信息。一个.9em的类型尺寸将使文本在大部分以16px为基础尺寸的显示器上为大约14px高。但是如果你有一个带.9em的字号的<p>标签，然后在这个<p>标签中有一个带.9em的自豪的<strong>标签，这个<strong>标签的em尺寸就不是14px而是12px（16.9.9）。因此在使用em值时要记住继承这个特性。
　　em是相对长度单位。相对于当前对象内文本的字体尺寸。
一般用法是，我们定义或浏览器的默认全页面的字体大小，当然我赞同自己定义会比较好，因为这样就不会因为浏览器的原因而使页面的字体大小变化导致页面错位。
所以我们可以一开始这样定义
body{font-size:12px;}//当然字体大小就自定了。

这是font-size的这个值便作为1em，font-size的定义值可能作为一个参考值，我们就可以根据这个参考值来使用em了，所以em就是所谓的相对长度单位了.

换算:
1.25em=1.25 * 12px=15px

如果记不住或不会换算的话，在线转换的网站https://www.runoob.com/tags/ref-pxtoemconversion.html

2.使用相对长度单位rem布局网页内容

当使用 rem 单位，他们转化为像素大小取决于页根元素的字体大小，即 html 元素的字体大小。 根元素字体大小乘以你 rem 值。·
例如，根元素的字体大小 16px，10rem 将等同于 160px，即 10 x 16 = 160。

image.png
CSS padding设置为 10rem
image.png
计算结果为160px