29.html5 移动端开发总结

手机与浏览器

浏览器:

移动端开发主要针对手机，ipad等移动设备，随着地铁里的低头族越来越多，移动端开发在前端的开发任务中站的比重也越来越大。各种品牌及尺寸的手机也不尽相同。尺寸不同就算了分辨率，视网膜屏 自动的各种内核的浏览器，想想头都大了。 
先说下浏览器。在中国有多少种浏览器？

ie、百度、360、搜狗、火狐、欧朋、Chrome、谷歌、行者无疆、财猫省钱、遨游、Wise光速、UC、智慧、QQ、海豚。。。（大概有70-80多种）

五花八门，还好不用担心这都是表象。虽然浏览器各不相同但从浏览器的内核来看基本分为四种：

浏览器内核：

1、Trident内核：IE最先开发或使用的，也称IE内核，360浏览器使用的也是IE内核。

使用IE内核的还包括:

世界窗（The World）

傲游浏览器（Maxthon）

腾讯TT（Tencent Traveler）

帆浏览器（Avant Browser）

360安全浏览器 （360SE）

搜狗浏览器（兼容模式）（Sougou Explorer）

瑞影浏览器（Rayying

等等

2、Webkit内核：谷歌chrome浏览器最先开发或使用，也叫谷歌内核，枫树浏览器、太阳花使用的也是谷歌内核。

3、Gecko内核： Netscape6开始采用的内核，后来的Mozilla FireFox (火狐浏览器) 也采用了该内核，K-Meleon浏览器也是使用这种内核。

4、Presto内核：目前只有Opera浏览器采用该内核。

聊完浏览器再来看下目前主流手机的屏幕分辨率及其屏幕尺寸：

分辨率：

Android：主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。（非主流机型还包括：240x320, 320x480, 640x960 这三种，其中两种都与 iPhone 一致。）
iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种。
WP：主流机型主要为 480x800，720x1280, 768x1280 这三种

屏幕尺寸：

android：一般在4寸-4.8寸之间，也有小到 3.2寸的，也有5寸，7寸，10寸的。
iOS：3.5寸，9.8寸，4.0 寸，7.8 寸。

在流量最大的100种设备中，目前全球最流行的屏幕分辨率为1136*640，排在第二～五位的依次是1920*1080，960*640，1280*720，及800*480。

了解了手机与浏览器就能够有的放矢的去开发一款受欢迎的移动端应用了。但这么多设备如何下手？

1.Viewport(视窗)

什么是 Viewport?

viewport 是用户网页的可视区域。
viewport 翻译为中文可以叫做”视区"。

手机浏览器是把页面放在一个虚拟的”窗口"（viewport）中，通常这个虚拟的"窗口"（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。

简单点来讲：移动设备上的viewport就是屏幕上能用来显示我们的网页的那一块区域。

viewport不局限于浏览器可视区域的大小，一般来讲要比浏览器的可视区域要大。

一般来讲，移动设备上的viewport都是要大于浏览器可视区域的，这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是其它值，这个是由设备自己决定的），但带来的后果就是浏览器会出现横向滚动条，因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。下图列出了一些设备上浏览器的默认viewport的宽度。

http://viewportsizes.com 里面收集了众多设备的理想宽度。可供大家参考。

很显然viewport的宽度并不等于设备屏幕的宽度，滚动条和缩放页面也不是我们想要的效果。那么怎么办呢？改轮到meta标签收拾残局了。

开发移动端页面时，我们最常见的一个写法就是在head标签中加入：

<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0'>

 

它的作用就是让设备的viewport的width等于设备的width;同时禁止了设备的手动缩放功能。

meta viewport 标签首先是由苹果公司在其safari浏览器中引入的，目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿，引入对meta viewport的支持

在meta viewport 中有6个属性，如下：

width：控制 viewport 的大小，可以指定的一个值，如果 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

height：和 width 相对应，指定高度。

initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。

maximum-scale：允许用户缩放到的最大比例。

minimum-scale：允许用户缩放到的最小比例。

user-scalable：用户是否可以手动缩放。

可以理解 “width=device-width”的作用就是把viewport的宽度变成了设备的宽度，无论竖屏还是横屏都一样,回头看下为什么我们在手机上打开一个正常的pc端网站，在没有手动缩放的情况下，页面会自动缩小到适合手机的屏幕的尺寸？

因为在没有指定缩放值的情况下，移动设备会自动计算initial-scale的值保证 layout viewport 也就是页面宽度自动适配浏览器的可视宽度。

另外有时候根据项目需要，我们需要隐藏iOs的上下状态栏实现全屏，只需要再meta标签中加入如下代码就能轻松实现：

<meta name="apple-mobile-web-app-capable" content="yes">
    此属性只针对 iOS，content只有 yes  or no。

 

2.@media查询

使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

设置好你的meta标签后就可以利用媒体查询来实现响应式的开发，当然你也可以使用百分比来实现自适应的开发。视项目需求而定。一般来说移动端开发@media查询会经常用到。

实例:

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}
如果浏览器窗口小于 500px, 背景将变为浅蓝色：

我们有时候也会在媒体查询代码中包含 max-width，从而将 CSS 的影响限制在更小范围的屏幕大小之内:

	@media (min-width:320px) and (max-width: 640px) { ... }
	如果浏览器窗口大于等于 320px小于等于640, 就...

一般来说响应式要适配那些尺寸呢？ 我们来看一下一个很火的前端响应式框架。bootstrap是如何实现响应式的。

	/* 超小设备（手机，小于 768px） */
/* Bootstrap 中默认情况下没有媒体查询 */

/* 小型设备（平板电脑，768px 起） */
@media (min-width: @screen-sm-min) { ... }

/* 中型设备（台式电脑，992px 起） */
@media (min-width: @screen-md-min) { ... }

/* 大型设备（大台式电脑，1200px 起） */
@media (min-width: @screen-lg-min) { ... }

bootstrap的分界点是 768px,992px,1200px;基本满足了需求，可以在开发中参考。

3. px,em,rem,pt

1、PX ：像素（Pixel）

PX是相对长度单位，它是相对于显示器屏幕分辨率而言的。比较稳定和精确。但在浏览器中放大或缩放浏览页面时会出现页面混乱的情况。

2. EM：相对长度单位

EM是相对于父元素来设计字体大小的。如果当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
所以在使用 EM 做单位的时候需要一个参考点 。一般都是以的“font-size”为基准。

EM 与 PX 的换算公式：
1em=16px；
12px=0.75em,10px=0.625em。
				

 

为了使用方便，用em时，我们通常在CSS中的body选择器中声明font-size=62.5%（使em值变为 16px*62.5%=10px）, 之后，你只需要将你使用的px值除以10，即可得到em值，如：12px=1.2em, 10px=1em。

但是别忘记了，EM是相对于父元素来设计字体大小的。 所以在使用em的时候总是受限于父元素的字体大小，使用起来非常不方便，因为不得不总要去搞清楚父元素的字体大小

计算公式这么写才更合理：
1 ÷ 父元素的font-size × 需要转换的像素值 = em值

不推荐使用。

3、REM ：是CSS3新增的一个相对单位（root em，根em)

REM是相对单位,是em的升级版，rem只会相对html的值，不会受到父级的影响(ie8及以下不兼容),如果你要兼容IE8那么请慎用，反正我经手的项目中没要考虑IE8及以下浏览器的。
这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。 目前，除了IE8及更早版本外，所有浏览器均已支持rem。 REM 是相对HTML根元素.这样就意味着，我们只需要在根元素确定一个参考值，在根元素中设置多大的字体，这完全可以根据项目需求。

实例：

html {font-size: 62.5%;/*10 ÷ 16 × 100% = 62.5%*/}
body {font-size: 1.2rem;/*1.2 × 10px = 12px */}
h1 { font-size: 2.4rem;/*2.4 × 10px = 24px*/}

网上大部分教程都是在html选择器中声明Font-size=62.5%（10÷16*100%=62.5%）然后直接使用1rem=10px单位进行换算。为什么是10除以16呢？
因为一般来讲：浏览器默认的字体大小都是16px;这么来说。（10÷16*100%=62.5%）这个算法是没有错的。但是浏览器种类这么多，谁能保证他们的默认字体都是16px? 
除非有人论证过。至少uc浏览器的字体就不够标准，UC浏览器可以自定义浏览器默认字体。

那该怎么办？rem不是相对html的吗？那就在html里设置一个绝对值就可以了！比如：

html{
	font-size:10px;
}	
	

那么1rem=10px; 
在写其他样式的时候就能以10为根尺寸进行计算了，如：

p{
 font-size:1.2rem;
 line-height:2.2rem;
}
	

好吧算来算去的也太麻烦了吧！还好网上有换算工具： http://mxd.tencent.com/wp-content/uploads/2014/11/rem.html
以下代码是工具自动生产的很贴心的有木有？

   @media only screen and (max-width: 1080px), only screen and (max-device-width:1080px) {
     html,body {
         font-size:33.75px;
     }
   }
     @media only screen and (max-width: 960px), only screen and (max-device-width:960px) {
     html,body {
         font-size:30px;
     }
   }
     @media only screen and (max-width: 800px), only screen and (max-device-width:800px) {
     html,body {
         font-size:25px;
     }
   }
     @media only screen and (max-width: 720px), only screen and (max-device-width:720px) {
     html,body {
         font-size:22.5px;
     }
   }
     @media only screen and (max-width: 640px), only screen and (max-device-width:640px) {
     html,body {
         font-size:20px;
     }
   }
     @media only screen and (max-width: 600px), only screen and (max-device-width:600px) {
     html,body {
         font-size:18.75px;
     }
   }
     @media only screen and (max-width: 540px), only screen and (max-device-width:540px) {
     html,body {
         font-size:16.875px;
     }
   }
     @media only screen and (max-width: 480px), only screen and (max-device-width:480px) {
     html,body {
         font-size:15px;
     }
   }
     @media only screen and (max-width: 414px), only screen and (max-device-width:414px) {
     html,body {
         font-size:12.9375px;
     }
   }
     @media only screen and (max-width: 400px), only screen and (max-device-width:400px) {
     html,body {
         font-size:12.5px;
     }
   }
     @media only screen and (max-width: 375px), only screen and (max-device-width:375px) {
     html,body {
         font-size:11.71875px;
     }
   }
     @media only screen and (max-width: 360px), only screen and (max-device-width:360px) {
     html,body {
         font-size:11.25px;
     }
   }
     @media only screen and (max-width: 320px), only screen and (max-device-width:320px) {
     html,body {
         font-size:10px;
     }
   }
     @media only screen and (max-width: 240px), only screen and (max-device-width:240px) {
     html,body {
         font-size:7.5px;
     }
   }
  @media only screen and (max-width: 16rem), only screen and (max-device-width:16rem) {
 html,body {
 font-size:0.5rem;
 }
 }

如果觉的@media查询的写法太过麻烦也可以考虑使用js来实现！

那么接下来我们来看下如何用js配合css来实现页面的自适应。