移动端web开发入门笔记-html教程

移动端web开发基本上分为三种：

• 移动端网页开发

传统的页面开发，可以参考手机腾讯网。

• 移动端web app开发

简单来说就是在开发中使用一些浏览器私有的方法，使得web页面拥有一些native的功能。

• hybrid app开发（在此不谈）

简单来说就是通过写特定的代码生成跨平台的web app，类似react，phonegap，cocos2d等。

由于本身没有深入移动端开发，但也可以预见一些移动端开发会碰到的问题：

• css与js跨平台的问题
• h5及诸多新特性的使用
• 响应式布局及屏幕分辨率问题
• native交互的使用
• 调试方法
• 性能优化
• 等等

当前移动设备的市场，主要考虑android，ios，windows三大平台就可以了。国内的话注意本身机器是可能安装有QQ，UC等浏览器的，还要考虑这方面的支持。在此入门只考虑webkit内核就可以了。

接着，针对于前两种开发模式，还是有必要了解一下移动端浏览器关于viewport的概念！

CSS像素与设备像素

设备像素（screen.width/height，单位是设备像素）实际上就是物理像素，衡量屏幕的分辨率实际上就是设备像素的多少，而CSS像素是一种抽象的宽度衡量。

让我们举一个关于缩放的栗子，浏览器实现缩放的原理实际上就是通过拉伸像素来实现的： 假设现在整个屏幕来展现一个CSS像素宽度为128px的元素，屏幕的设备像素宽度是128px，那么实际上1个CSS像素等于1个设备像素，如图：

现在我们将元素放大为原来的200%，那么1个CSS像素等于4个设备像素，如图（一个红色小方块等于一个CSS像素）：

设备像素对于开发来说基本上没用，缩放比例对你来说也没有什么影响，CSS会将展示效果处理的很好，但理解这个概念对接下来讲的会有所帮助，接下来很多度量是以CSS像素为单位的。

PC端的viewport

viewport的功能是浏览器布局实现中用来约束网页中最顶级快级元素的。

让我们举个例子，大家都知道我们使用流式布局时给某个元素设置【width: 10%】的属性，那么它的宽度就是其父元素宽度的10%，假设是元素，那么问题就变成了元素的宽度是多少呢？按照刚刚的理论，元素的宽度是元素的宽度的100%，我们又知道元素的宽度是浏览器窗口的宽度。但理论上的宽度等于viewport的宽度的100%，viewport实际上等于浏览器窗口。

是的，它就是这么定义的，就这么抽象地去理解它。viewport不是一个HTML结构，所以你不能用CSS来控制它。

浏览器的这一性质会带来一些影响，比如我们的导航条的宽度设置成100%，那么当页面放大的时候，就会出现下面的状态：

这样我们知道viewport实际上就是浏览器窗口，它的大小是由浏览器特性所决定的，一旦页面渲染完成，无所是缩放操作还是其他什么操作都不会让它变化。 那么我们可以用元素来度量它，熟悉DOM的人都知道，document.documentElement实际上指的就是元素，但document.documentElement.clientWidth/Height就是viewport的大小。不管html尺寸是多少（也许你会在css或者是html中给元素附上width属性，度量元素大小的属性是document.documentElement.offsetWidth/Height）。这里的度量是用CSS像素来度量的。

移动端的viewport

我们想象一下照搬PC端的模型迁移到移动端来展示，那么假设一个设备屏幕为400px的设备，展示一个流式布局的页面，宽度为10%的列将会被压缩到窄窄的一条，在手机上就会失去展示效果。所以移动端的viewport会比PC端的稍微复杂一点，分为layout viewport和visual viewport。

我们先来看看stackoverflow上George Cummins大神给出概念的定义：

Imagine the layout viewport as being a large image which does not change size or shape. Now image you have a smaller frame through which you look at the large image. The small frame is surrounded by opaque material which obscures your view of all but a portion of the large image. The portion of the large image that you can see through the frame is the visual viewport. You can back away from the large image while holding your frame (zoom out) to see the entire image at once, or you can move closer (zoom in) to see only a portion. You can also change the orientation of the frame, but the size and shape of the large image (layout viewport) never changes.

解释一下就是，visual viewport是页面当前显示在屏幕上的部分，用户可以通过滚动来改变他所看到的页面部分，或者通过缩放来改变visual viewport的大小。layout viewport就是一个页面渲染之后具有固定大小的大框，跟之前提到PC上的概念相似，我们知道它的大小是由浏览器特性来决定的，在PC端就是等于窗口大小，但在移动端不同浏览器的值不同，比如Safari的值是980px，Android WebKit为800px。我们通过两幅图和一个栗子感受一下：

可以看到，当缩放比例为100%时，layout viewport = visual viewport，当用户将页面放大时，显示在屏幕上的页面部分变化了，所以visual viewport变化了，而layout viewport的大小还是原来的大小（这里以CSS像素单位来理解）

度量visual viewport是通过window.innerWidth/Height来度量的，当然单位也是CSS像素。

Meta viewport标签

这个标签实际上就是向HTML文件中插入如下句式的标签，起初起源于Apple：

苹果公司私有的meta标签，可以使web应用在全屏模式下运行，否则将用safari浏览器展示其内容

默认情况下，Safari和IOS会自动识别像手机号码的文本，这个meta标签是用来禁止这项功能的

Call me

当用户将web应用添加到主屏幕时，这时候IOS可以提供配置应用图标的功能和启动图片的功能。还有类似连接其他native应用的功能。 相似地，Google Chrome在安卓平台上也提供了类似的功能，不同的是android会自动识别邮箱地址，而ios是电话号码：

(Todos)