JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
<script>
var phonewidth = parseint(window.screen.width);
var phoneheight = parseint(window.screen.height);
var phonescale = phonewidth/750;//除以的值按手机的物理分辨率
var ua = navigator.useragent;
if (/android (\d+\.\d+)/.test(ua)) {
var version = parsefloat(regexp.$1);
// andriod 2.3
if (version > 2.3) {
document.write('<meta name="viewport" content="width=device-width,initial-scale='+phonescale+',minimum-scale='+phonescale+',maximum-scale='+phonescale+',user-scalable=no">');
// andriod 2.3以上
} else {
document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
}
// 其他系统
} else {
document.write('<meta name="viewport" content="width=device-width, initial-scale='+phonescale+',minimum-scale='+phonescale+',maximum-scale ='+phonescale +',user-scalable=no,">');
}
</script>
做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了，当拿到设计图的时候，图基本都是按物理分辨率来设计的，一般常用的为640（iphone5/5s）、750（iphone6/6s），而谷歌等浏览器采用小手机模式浏览页面的时候，上面的值为逻辑分辨率，调试的时候很难把控页面样式，在手机端的样式也会因此大乱，在页面头部加入以上一段js之后，在手机端就可以正常显示了，
var phonescale = phonewidth/750;
除以的为设计图设计的页面宽度，750是按iphone6来设计（根据自己使用需求来修改），即让页面的 放大比率=屏幕的逻辑分辨率/物理分辨率，从而达到适应手机的效果。
（注意，有时候页面加了这段代码在调试的时候，切记刷新，刷新过后就会按手机缩放比例显示）
概念解析：
phys.width:一般我们所指的宽度width即为phys.width，物理宽度（物理分辨率）
device-width:又称为css-width，设备宽度（逻辑分辨率）
其中我们可以获取phys.width通过document.documentelement.clientwidth;
而获取css-width通过 window.screen.width获取。
所以这里 phonewidth（逻辑分辨率） = parseint(window.screen.width);
如iphone6的phys.width为750px，而css-width为375px。
明白一个浏览器默认行为。
试想，浏览器如果把电脑端的980px的网页展现在宽度为750px的iphone6手机屏上，势必会放不下，手机端横向会出现滚动条，怎么阻止这种情况呢，很简单，浏览器默认一个虚拟窗口，不同浏览器有不同的虚拟窗口宽度的默认值如：safari iphone：980px;
opera:850px;
andriod webkit:800px;
ie:974px;
然后会把这个980px虚拟窗口装进宽度为750px的iphone6中，当然这样的话必须缩放，这就是为什么在手机中展现电脑端页面没有出现横向滚动条，而且字迹明显变小的原因。
initial-scale='+phonescale+',minimum-scale='+phonescale+',maximum-scale='+phonescale+'
这段代码切记要指定 initial-scale=***，在安卓系统中，不指定默认的nitial-scale=***，只指定最小和最大缩放值，也可以正常显示，但是safari浏览器则会失效，对于宽度是100%的页面， 则显示为页面的30%左右的宽。
target-densitydpi=device-dpi
webkit内核默认按照160的dpi来排版。假如设备真实dpi是480，宽度是1080，在webkit会按160dpi，360宽度来排版。排版结束后在放大到1080宽。
所以当取window.innerwidth之类的值的时候，取的是webkit实际排版宽度360，而不是1080.
target-densitydpi=device-dpi可以强制内核以480dpi排版，使画面更精细，window.innerwidth也将为屏幕宽度1080.
但webkit从去年开始取消了对target-densitydpi的支持。（所以现在不建议写该属性了）
想实现target-densitydpi=device-dpi的效果有什么方法？提交此次补丁的webkit开发者说可以用responsive images 和 css device units来替代。
参考链接：
以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流，谢谢大家对的支持!
上一篇： ionic3 懒加载