JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码


Posted in Javascript onAugust 18, 2017
 手机的屏幕有大有小,移动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>     

做手机端页面最头疼的就是物理分辨率和逻辑分辨率的转换了,当拿到设计图的时候,图基本都是按物理分辨率来设计的,一般常用的为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来替代。

参考链接:

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助~如果有疑问大家可以留言交流,谢谢大家对三水点靠木的支持!

Javascript 相关文章推荐
javascript数组输出的两种方式
Jan 13 Javascript
Javascript核心读书有感之表达式和运算符
Feb 11 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
Dec 07 Javascript
浅谈时钟的生成(js手写简洁代码)
Aug 20 Javascript
Bootstrap基本组件学习笔记之input输入框组(9)
Dec 07 Javascript
Vue.js实现表格动态增加删除的方法(附源码下载)
Jan 20 Javascript
深究AngularJS如何获取input的焦点(自定义指令)
Jun 12 Javascript
AngularJS service之select下拉菜单效果
Jul 28 Javascript
vue.js移动端app之上拉加载以及下拉刷新实战
Sep 11 Javascript
vue 1.x 交互实现仿百度下拉列表示例
Oct 21 Javascript
深入了解JS之作用域和闭包
Jun 16 Javascript
vue 解决mintui弹窗弹起来,底部页面滚动bug问题
Nov 12 Javascript
移动设备手势事件库Touch.js使用详解
Aug 18 #Javascript
JavaScript你不知道的一些数组方法
Aug 18 #Javascript
关于meta viewport中target-densitydpi属性详解(推荐)
Aug 18 #Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 #Javascript
JS实现页面打印(整体、局部)
Aug 18 #Javascript
简单实现jQuery轮播效果
Aug 18 #jQuery
JavaScript编写的网页小游戏,很给力
Aug 18 #Javascript
You might like
PHP 上传文件的方法(类)
2009/07/30 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
PHP动态创建Web站点的方法
2011/08/14 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP不使用内置函数实现字符串转整型的方法示例
2017/07/03 PHP
给网站上的广告“加速”显示的方法
2007/04/08 Javascript
JavaScript 继承详解(三)
2009/07/13 Javascript
JavaScript 事件的一些重要说明
2009/10/25 Javascript
javascript实现锁定网页、密码解锁效果(类似系统屏幕保护效果)
2014/08/15 Javascript
浅谈javascript中的DOM方法
2015/07/16 Javascript
JS实现仿FLASH效果的竖排导航代码
2015/09/15 Javascript
JavaScript类的写法
2016/09/17 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
Bootstrap Tree View简单而优雅的树结构组件实例解析
2017/06/15 Javascript
移动端Ionic App 资讯上下循环滚动的实现代码(跑马灯效果)
2017/08/29 Javascript
vue proxyTable 接口跨域请求调试的示例
2017/09/12 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
Vue项目自动转换 px 为 rem的实现方法
2018/10/29 Javascript
element-ui 时间选择器限制范围的实现(随动)
2019/01/09 Javascript
vue App.vue中的公共组件改变值触发其他组件或.vue页面监听
2019/05/31 Javascript
JQuery省市联动效果实现过程详解
2020/05/08 jQuery
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
[47:52]完美世界DOTA2联赛PWL S2 PXG vs InkIce 第二场 11.26
2020/11/30 DOTA
树莓派4B+opencv4+python 打开摄像头的实现方法
2019/10/18 Python
numpy创建单位矩阵和对角矩阵的实例
2019/11/29 Python
CSS3圆角和渐变2种常用功能详解
2016/01/06 HTML / CSS
简历自荐信
2013/12/02 职场文书
《搭石》教学反思
2014/04/07 职场文书
大学生应聘求职信
2014/05/26 职场文书
少年雷锋观后感
2015/06/10 职场文书
商业计划书之服装
2019/09/09 职场文书
Python实现简单的猜单词
2021/06/15 Python
解析探秘fescar分布式事务实现原理
2022/02/28 Java/Android
使用Ajax实现进度条的绘制
2022/04/07 Javascript