移动端适配方案
方案一：（原创）
情景：根据750宽的设计稿进行排版布局
思路：
先设置视口宽度为750，进行正常排版布局，单位用px，还原设计稿
<meta name="viewport" content="width=750,target-densitydpi=device-dpi,user-scalable=no" /> --> <meta name="format-detection" content="telephone=no"/>
到此为止，虽然能在手机上正常预览，看起来好像没问题，但当你横竖屏切换时，会发现一个bug，屏幕被放大了而且恢复不回来了。此时，你还是需要把宽度改为设备宽度
<meta name="viewport" content="width=device-width, initial-scale=1.0">
到此，页面还是被放大的，因为设备物理像素（分辨率）一般都比设备独立像素（css，js中的px大小）大，dpi为1的是一倍关系，dpi为2的是2倍关系（iphone6,7,8），dpi为3的是3倍关系（iphone6,7,8plus）
然后把css所有px单位的大小如 375px 转换为 375/750*100 vw单位，根据这个计算公式：要求的vw单位的值/100vw = 当前px单位的值/原稿宽度
，可以自己写个js脚本，一次性把css文件中用正则匹配出所有的px值，替换为vw值，ok搞定
额外：
获取设备dpi：var dpi = window.devicePixelRatio;
获取设备屏幕宽度：var width = document.documentElement.clientWidth;
iphone尺寸收集:
iPhone4:(设备像素比:2),(设备独立像素:320x480),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhone5:(设备像素比:2),(设备独立像素:320x568),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhone6:(设备像素比:2),(设备独立像素:375x667),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhone7:(设备像素比:2),(设备独立像素:375x667),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhone8:(设备像素比:2),(设备独立像素:375x667),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhone6plus:(设备像素比:3),(设备独立像素:414x736),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhone7plus:(设备像素比:3),(设备独立像素:414x736),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhone8plus:(设备像素比:3),(设备独立像素:414x736),(状态栏高:20px),(导航栏高:44px),(标签栏高:49px)
iPhonex:(设备像素比:3),(设备独立像素:375x812),(状态栏高:44px),(导航栏高:44px),(标签栏:49px),(虚拟Home:34px)
iPhonexs:(设备像素比:3),(设备独立像素:375x812),(状态栏高:44px),(导航栏高:44px),(标签栏:49px),(虚拟Home:34px)
iPhonexr:(设备像素比:2),(设备独立像素:414x896),(状态栏高:44px),(导航栏高:44px),(标签栏:49px),(虚拟Home:34px)
iPhonexsmax:(设备像素比:3),(设备独立像素:414x896),(状态栏高:44px),(导航栏高:44px),(标签栏:49px),(虚拟Home:34px)
iphone手机模拟器尺寸:
手机端的网页一般都是在微信内打开或其他浏览器打开，或app内打开，你会发现你的网页能呈现的区域是窗口高度减去导航栏高度的。
这样子的话，我们在pc端进行布局调试的时候，应该使用正确的手机模拟器尺寸
iPhone4:(设备像素比:2),(设备独立像素:320x416)
iPhone5:(设备像素比:2),(设备独立像素:320x504)
iPhone678:(设备像素比:2),(设备独立像素:375x603)
iPhone678plus:(设备像素比:3),(设备独立像素:414x672)
iPhonex xs:(设备像素比:3),(设备独立像素:375x724)
iPhonexr:(设备像素比:2),(设备独立像素:414x808)
iPhonexsmax:(设备像素比:3),(设备独立像素:414x808)
待续。。
