欢迎来到361模板(www.ke361.com),原创精品织梦模板提供商。QQ快速注册登录 网站托管 VIP 网站定制

织梦模板

当前位置:织梦模板 > 技术文档 > 网站技巧 > 通过JS实现手机等移动端页面按手机屏幕分辨率自动缩放
这篇文章主要为大家详细介绍了通过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;


然后会把这个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来替代。


以上就是通过JS实现手机等移动端页面按手机屏幕分辨率自动缩放的全部内容,希望对大家的学习和解决疑问有所帮助,也希望大家多多支持361模板网。

感谢打赏,我们会为大家提供更多优质资源!

热词标签: JS 移动端 自动缩放 页面缩放

上一篇织梦软件模型手动指定地址增加选取本地

下一篇宝塔面板LNMP(Nginx)环境设置ZBlog PHP伪静态方法

取消

感谢您的支持,我们会继续努力的!

扫码支持
扫码打赏,你说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

Powered by361模板网,分享从这里开始,精彩与您同在