h5浏览器兼容及UI设计图的解决方法

h5浏览器兼容及UI设计图的解决方法

先上代码，后解释。。

↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓

meta 标签

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

js代码（自觉带上jQuery）

<script type="text/javascript">
	(function () {
		$("html,body").css("font-size", ($('html').width() / 750 * 100) + "px");
	})()
</script>

↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑

先简单解释一下dpr适配吧
    一个屏幕的DPR是根据屏幕的物理像素除以屏幕的设备独立像素（也叫密度无关像素）得来的（DPR = 物理像素 / 设备独立像素）。iphone6宽度的设备独立像素是375，宽度的物理像素是750，那么就意味着DPR是2。

flexible.js对dpr有一个很好的适配，不同手机型号的屏幕分辨率都有对应的dpr、html的font-size初始值以及meta的适配。小编在做项目的时候也是用的flexible.js，同样也出现了很多的问题。

1. 与UI设计图的数值换算很麻烦。
   解：现在大部分的UI设计图宽都是750像素，flexible.js中html的font-size初始值可不是按照设计图宽750像素来的，换算其他太麻烦，难道要放个计算机在旁边算吗？完全降低了开发效率。
2. meta标签与接入第三方聊天工具不匹配。
   解：flexible.js中对meta的初始值也是换算而来，不像我们上面写meta标签那种比例而来，我们做的项目需要接入客服聊天，有一些第三方的聊天工具完全不适配，在手机上，聊天界面特别小，去掉flexible.js，整个项目都要改，不去掉的话，第三方的聊天工具也是要改。

接下来说说上面我说的方法吧。

meta标签 content属性值 :
     width:可视区域的宽度，值可为数字或关键词device-width
     intial-scale:页面首次被显示是可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放
     maximum-scale=1.0, minimum-scale=1.0;可视区域的缩放级别，
     maximum-scale用户可将页面放大的程序，1.0将禁止用户放大到实际尺寸之上。
     user-scalable:是否可对页面进行缩放，no 禁止缩放

(function () {$("html,body").css("font-size",($(‘html’).width() / 750 * 100) + “px”);})()

重点在这里↓↓↓↓↓：

    比如说：设计图中一个input宽600px，在css中设置input宽按照设计图是值除以100就可以，这个input的宽就是6rem;高是80px，css设置height:0.8rem即可，是不是很方便呢。。

如果有什么问题，解决不了的，可以联系小编哟~~