【整理笔记】手机端html页面制作需要了解的东西集合
整理中
一开始我接触到手机页面的时候在网上搜寻了好多的资料，都很零很散，当时因为工作需要快速的做出成品来，但找了好久的资料，发现其实这个水是很深的。所以整理一个能快速解决问题的，并把收集到的相关手机页面的内容整理一下，方便统一查看。也希望这篇文章能帮到新学习做手机页面的朋友。
页面头部：
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1" />
这样写可以达到的效果是如果安装了GCF，则使用GCF来渲染页面，如果为安装GCF，则使用最高版本的IE内核进行渲染。
<meta name="viewport" content="width=device-width, initial-scale=1.0">设置屏幕宽度为设备宽度，禁止用户手动调整缩放
CSS @media ：
iphone
@media (device-width:375px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone 6 */
}
@media (device-width:414px) and (-webkit-min-device-pixel-ratio:3.0){/* 兼容iphone6 plus */
}
@media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone4/4s */
}
@media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){/* 兼容iphone5 */
}
必需了解的知识：
尺寸：
手机屏幕尺寸：手机尺寸和平板电脑的屏幕分辨率
友盟移动指数：国内移动设备使用地区排名数据统计
移动设备尺寸大全：iphone、android、winphone所有设备尺寸及分辨率
设备尺寸表：电脑、平板、手机尺寸及分辨率设备比率
放弃了对像素(px)的使用，使用em、rem和百分比(%)。
关于em文章链接： CSS中的EM属性-弹性布局
关于rem文章链接: rem设置字体大小
主流智能手机屏幕分辨率：
Android：主流机型主要为 480x800, 480x854, 540x960, 720x1280, 800x1280 这五种。
（非主流机型还包括：240x320, 320x480, 640x960 这三种，其中两种都与 iPhone 一致。）
iOS: 主流机型主要为 320x480, 640x960, 640x1136, 1024x768, 2048x1536, 这五种。
WP：主流机型主要为 480x800，720x1280, 768x1280 这三种
浏览器内核：
android和ios都是使用了webkit
国内手机浏览器现状多数都基于Webkit开发
目前国内手机浏览器厂商宣称的“自主内核”如UC的U3内核、手机QQ浏览器的X5内核以及华为天天的T9内核(以上均为Android平台)均基于开源内核Webkit开发，在Webkit的基础上进行二次优化，并不能算是完全的自主内核。
而在iOS以及WP7平台上，由于系统封闭，不允许除系统自带浏览器内核以外的浏览器内核进入，因此各家浏览器的开发均为在Safari或者 IE内核的基础上进行二次开发，优化功能和自制UI。
关于meta:
<meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
扩展补充阅读：
1、meta标签、viewport概念和理解
2、px和dpi（此像素非彼相素）
3、@media 媒体判断 （断点）
4、手机屏幕尺寸参考网站
5、学用IScroll.js
6、CSS3动画
推荐书：
响应式WEB设计
