通过JS实现手机等移动端页面按手机屏幕分辨率自动缩放

2024-09-06 12:41:18

字体：大中小

来源：转载

供稿：网友

这篇文章主要为大家详细介绍了通过JS实现手机等移动端页面按手机屏幕分辨率自动缩放，具有一定的参考价值，感兴趣的小伙伴们可以参考一下,有需要的朋友可以收藏方便以后借鉴。

手机的屏幕有大有小，移动web最好做成响应式布局，也就是自适应屏幕，没有固定宽高，这样的话，在所有手机上都可以正常显示。关于移动端页面按手机屏幕分辨率自动缩放的js，先附上代码

<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>

概念解析：

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;