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 相关文章推荐
使用js声明数组,对象在jsp页面中(获得ajax得到json数据)
Nov 05 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 Javascript
javaScript年份下拉列表框内容为当前年份及前后50年
May 28 Javascript
jQuery 浮动导航菜单适合购物商品类型的网站
Sep 09 Javascript
C#中使用迭代器处理等待任务
Jul 13 Javascript
JS传值出现中文参数乱码的解决方法
Jun 30 Javascript
利用JavaScript判断浏览器类型及版本
Aug 23 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
JavaScript之生成器_动力节点Java学院整理
Jun 30 Javascript
前端Vue项目详解--初始化及导航栏
Jun 24 Javascript
微信小程序实现音乐播放器
Nov 20 Javascript
代码解析React中setState同步和异步问题
Jun 03 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/09 PHP
PHP将DateTime对象转化为友好时间显示的实现代码
2011/09/20 PHP
ThinkPHP数据操作方法总结
2015/09/28 PHP
PHP中substr函数字符串截取用法分析
2016/01/07 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
jQuery 阴影插件代码分享
2012/01/09 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
关于全局变量和局部变量的那些事
2013/01/11 Javascript
JavaScript中匿名、命名函数的性能测试
2014/09/04 Javascript
微信小程序商城项目之侧栏分类效果(1)
2017/04/17 Javascript
使用vue与jquery实时监听用户输入状态的操作代码
2017/09/19 jQuery
JS实现元素上下左右移动效果
2017/10/18 Javascript
详解基于Vue cli生成的Vue项目的webpack4升级
2018/06/19 Javascript
原生JS实现简单的倒计时功能示例
2018/08/30 Javascript
详解如何模拟实现node中的Events模块(通俗易懂版)
2019/04/15 Javascript
vue.js+ElementUI实现进度条提示密码强度效果
2020/01/18 Javascript
Python编码时应该注意的几个情况
2013/03/04 Python
Python中使用OpenCV库来进行简单的气象学遥感影像计算
2016/02/19 Python
Python如何import文件夹下的文件(实现方法)
2017/01/24 Python
Python中关键字nonlocal和global的声明与解析
2017/03/12 Python
Python中标准库OS的常用方法总结大全
2017/07/19 Python
python机器学习库常用汇总
2017/11/15 Python
Python3 queue队列模块详细介绍
2018/01/05 Python
tensorflow中next_batch的具体使用
2018/02/02 Python
详解Pandas之容易让人混淆的行选择和列选择
2019/07/10 Python
python多线程高级锁condition简单用法示例
2019/11/07 Python
python通过文本在一个图中画多条线的实例
2020/02/21 Python
CSS3教程(8):CSS3透明度指南
2009/04/02 HTML / CSS
css3气泡 css3关键帧动画创建的动态通知气泡
2013/02/26 HTML / CSS
syb养殖创业计划书
2014/01/09 职场文书
迟到检讨书大全
2014/01/25 职场文书
比赛口号大全
2014/06/10 职场文书
党的群众路线对照检查材料
2014/09/22 职场文书
环卫处个人工作总结
2015/03/04 职场文书
仓库统计员岗位职责
2015/04/14 职场文书
秀!学妹看见都惊呆的Python小招数!【详细语言特性使用技巧】
2021/04/27 Python