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（对应iPhone 5/5s）和750（对应iPhone 6/6s）。然而，Chrome等浏览器在移动端调试模式下使用的是逻辑分辨率，这导致样式控制困难，手机端显示效果容易混乱。在页面头部加入上述JavaScript代码后，即可在手机端实现正常显示。

var phoneScale = phoneWidth/750;

代码中除以的数值为设计图的宽度，例如750对应iPhone 6的设计标准（可根据实际需求调整）。其原理是使页面放大比率等于屏幕的逻辑分辨率除以物理分辨率，从而实现适应不同手机屏幕的效果。

注意：在调试过程中加入此代码后，务必刷新页面，刷新后即可按手机缩放比例正确显示。

物理分辨率与逻辑分辨率解析

概念解析：

phys.width：通常所指的宽度width即为phys.width，代表物理宽度（物理分辨率）。

device-width：又称css-width，代表设备宽度（逻辑分辨率）。

我们可以通过document.documentElement.clientWidth;获取phys.width的值。

而获取css-width则通过window.screen.width来实现。

因此，这里phoneWidth（逻辑分辨率）等于parseInt(window.screen.width)。

以iPhone 6为例，其phys.width为750px，而css-width为375px。

需要理解浏览器的一个默认行为。

试想，若浏览器将电脑端980px宽的网页直接展现在宽度为750px的iPhone 6屏幕上，必然无法完全放下，手机端会出现横向滚动条。如何避免这种情况？很简单，浏览器默认设置一个虚拟窗口，不同浏览器的虚拟窗口宽度默认值不同，例如Safari iPhone为980px；

Opera为850px；

Android Webkit为800px；

IE为974px；

随后，浏览器会将这个980px的虚拟窗口装入宽度为750px的iPhone 6屏幕中。显然，这必须进行缩放，这就是为什么在手机中展示电脑端页面时没有出现横向滚动条，且文字明显变小的原因。

initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+'

Viewport缩放参数注意事项

这段代码必须指定initial-scale=***。在安卓系统中，若不指定默认的initial-scale=***，仅指定最小和最大缩放值，页面也能正常显示；但在Safari浏览器中则会失效，对于宽度为100%的页面，其显示宽度仅为页面的30%左右。

target-densitydpi=device-dpi

WebKit排版机制与替代方案

WebKit内核默认按照160的DPI进行排版。假如设备真实DPI为480，宽度为1080，WebKit会按160 DPI、360宽度进行排版。排版结束后，再放大到1080宽。

因此，当获取window.innerWidth等值时，取得的是WebKit实际排版宽度360，而非1080。

设置target-densitydpi=device-dpi可以强制内核以480 DPI排版，使画面更精细，此时window.innerWidth也将变为屏幕宽度1080。

但WebKit从去年开始已取消对target-densitydpi的支持（因此现在不建议编写该属性）。

如何实现target-densitydpi=device-dpi的效果？提交此次补丁的WebKit开发者表示，可以使用responsive images和CSS device units来替代。

参考链接：

https://www.jb51.net/article/121524.htm

https://www.jb51.net/article/121515.htm

以上就是本文的全部内容，希望本文的内容对大家的学习或工作能带来一定的帮助。如果有疑问，欢迎留言交流，感谢大家对本站的支持！