【整理笔记】手机端html页面制作需要了解的东西集合

整理中

一开始我接触到手机页面的时候在网上搜寻了好多的资料，都很零很散，当时因为工作需要快速的做出成品来，但找了好久的资料，发现其实这个水是很深的。所以整理一个能快速解决问题的，并把收集到的相关手机页面的内容整理一下，方便统一查看。也希望这篇文章能帮到新学习做手机页面的朋友。

页面头部：



CSS @media ：

　　iphone


主流媒体宽度断点：

必需了解的知识：

尺寸：

手机屏幕尺寸：手机尺寸和平板电脑的屏幕分辨率

友盟移动指数：国内移动设备使用地区排名数据统计

移动设备尺寸大全：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设计