移动端开发注意事项（1）

PC端页面直接在移动端浏览器查看会有一些问题，需要一些设置来解决
viewport 有默认宽度，并且会默认缩放iphone4默认viewport大小980px视口
浏览器=》视口=》页面
可以设置宽度 content="width=320"设置成和设备一样的宽度

<meta name="viewport" content="width=320">

由于移动端设备的多样性，所以要借助另一个属性 width=device-width视口宽度等于设备宽度不过单纯设置宽度，页面还是会进行缩放，所以要设置缩放比initial-scale 设置缩放比

<meta name="viewport" content="initial-scale=1.0">

只设置宽度或者缩放比里的一项并不能达到100%还原页面，所以要两个同时设置

<meta name="viewport" content="width=device-width,initial-scale=1.0">

有些页面可能不需要用户自行缩放，防止页面变形设置是否允许用户缩放user-scalable 0 1 no yes

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scaleable=0">

其他参数maximum-scale:最大缩放比，大于0的数字minimun-scale:最小缩放比,大于0的数字

实例说明现在拿移动端淘宝为例子，它的meta标签设置为

<meta name="viewport" content="initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no">

可以看到淘宝的meta标签默认缩放比设置为了0.5，它的页面宽度为640，通过缩放进行适配，那为何要这么做？
这里就得说说移动端设备的分辨率问题，iphone4的像素为320*480
像素又分为物理像素和css像素,这里说的手机分辨率指的是物理像素，一个物理像素对应一个分辨率

这里用iphone4来举例说明：

• iphone4的分辨率为640*980
• iphone4的css像素为 320*480
• 所以手机上的一个css像素点对应了的物理像素为 2*2 那么由此可以得到iphone4上的像素比为：物理像素/css像素=2：1
  iphone6p由于具有更高的分辨率，所以像素比也更高，为3：1那么由此可以看出，在iphone4上，由于淘宝页面将宽度设置为了640px，那么要在320px宽度的设备之上进行适配，所以要进行缩放，initial-scale=0.5进行设置这么做可以提高用户体验，使页面更加清晰