手机端页面制作

ipone5 分辨率： 640 * 1136
英寸： 4
像素密度：326ppi

640*1136为什么在设备模拟器上是 320 * 568 因为我们的 iphone5 的dpr = 2;

ppi 像素密度 – 每英寸显示的像素点的个数
ppi = 开平方(物理像素width的平方 + 物理像素height的平方) / 英寸

viewport 视口

layout viewport 布局视口 iphone 980px
ideal viewport 度量视口 iphone5 320px

meta标签

<meta name="keywords" content="关键字1,关键字2,关键字3">
<meta name="description" content="描述内容">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, maximum-scale=1">
<meta name="format-detection" content="telephone=no, email=no">

viewprot

• width=device-width 让我们的布局视口=度量视口
• initial-scale 默认缩放比 ，就设置为1
• user-scalable=no 限制用户不可以缩放

写手机页面时

• 页面head 头部加入 meta标签 viewport
• psd图片一般是按照iphone5的设计来的。除以dpr就好。

单位

• em
• rem
• vw