一篇真正教会你开发移动端页面的文章(二)
psd图：
现在移动端的设计图一般以iphone5（640px）和iphone6（750px）为准，ps左下角放大到100%，看宽度是多少，就是以多少为准。本篇以iphone6（750px为准），其它尺寸道理一样。psd原稿按照设备像素来设计的。
iphone5理想视口像素：320*568
iphone5的设备像素是：640*1136；
dpr=2
iphone6理想视口像素：375*667
iphone6的设备像素是：750*1334；
dpr=2
dpr=设备像素个数/理想css像素个数
window的全局属性可以测试设备比：devicePixelRatio
web开发基于布局视口，现在将布局视口的宽设置为理想视口的宽，width=device-width，
所以现在你眼里的屏幕宽度对应的css像素是375*667；
实例一：
第一步
你测量了psd上一个正方形：200px*200px
你在代码写上了200*200px，打开浏览器一看，傻眼了，比例明显不对。
原因：psd原稿尺寸是按照设备像素来设计的，我们按照phone6的尺寸，所以设计稿的尺寸是iphone6的设备像素尺寸，是750*1334，而我们css中的样式是基于布局视口计算的，由于页面写上了标签
<mata name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable="no"/>
width=device-width这段代码是让布局视口等于理想视口，最终导致：布局视口是375*667px，
你写的200*200是基于750*1334，
而你的css对应屏幕的是375*667；
所以不对；
解决：width:100px height:100px,就正常了
第二部：
根据上面，psd总宽750px,测元素宽200px,而我们真正做页面基于布局视口，布局视口是375px，正好是设计稿的一半，所以应该将测得尺寸除以2，于是修改代码：100px*100px,现在效果一样了
但是，我们知道测得除以2,111除以2得55.5，计算机或手机没办法显示不到1像素的像素值，计算机或手机将自动补全为1，显示是56像素，这不是我们要的。
写页面的时候已经将布局视口=理想视口了
缩放比为1的dpr（devicePixelRatio）=设备/理想(屏宽css，开发者眼里的css)
元素 设备像素
问题：200*200 750*1334 设计稿
元素css 理想视口屏宽
100*100 375*667 iphone6
100*100 x 414*736 7plus 比例又不一致了，所以不能直接除以2
750/414=200/x x=200*(414/750) x=测*(设备理想视口宽/psd宽)
所以：
不同的手机，布局视口（现在也等于理想视口也等于屏宽）不一样，比例又不一致了，所以不能直接除以2。直接除以2不能在所有设备显示完好
于是：如果 布局视口尺寸==设备像素尺寸，那么测得尺寸可以直接用于开发页面，其它的手机，只需要进行等比缩放就OK了
如果：我们改变了理想视口尺寸的话，也就改变了布局视口尺寸，==>测得即写得；如何改变理想视口尺寸呢？如何让理想等于设备？
解答：缩放是缩小或放大css的过程，以iphone6为例，由于iphone6的dpr是2，当缩放比是1，
一个css像素尺寸对应2个设备像素尺寸，
当将一个css像素缩小到原来一半，即原来的0.5倍，缩小倍数=设备像素比的倒数；
解决：scale=1/window.devicePixelRatio 设置scale动态,保证布局永远等于设备
布局永远等于设备，就会出现测得即写得；
width:200px height:200px
第三步：iphone5与iphone6对比效果，由于iphone5与iphone6的设备像素不一致，ihpone6保持与设计图一致，而iphone5不一致。效果偏差
解决：利用rem