移动端页面按手机屏幕分辨率自动缩放的js
1 <script>
2 var phoneWidth = parseInt(window.screen.width);
3 var phoneHeight = parseInt(window.screen.height);
4 var phoneScale = phoneWidth/750;//除以的值按手机的物理分辨率
5 var ua = navigator.userAgent;
6 if (/Android (d+.d+)/.test(ua)) {
7 var version = parseFloat(RegExp.$1);
8 // andriod 2.3
9 if (version > 2.3) {
10 document.write('<meta name="viewport" content="width=device-width,initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale='+phoneScale+',user-scalable=no">');
11 // andriod 2.3以上
12 } else {
13 document.write('<meta name="viewport" content="width=device-width,user-scalable=no">');
14 }
15 // 其他系统
16 } else {
17 document.write('<meta name="viewport" content="width=device-width, initial-scale='+phoneScale+',minimum-scale='+phoneScale+',maximum-scale ='+phoneScale +',user-scalable=no,">');
18 }
19 </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来替代。
(2017.02.20更新)
参考链接:http://www.cnblogs.com/wbxjiayou/p/5176815.html
http://blog.csdn.net/fengri5566/article/details/9414599
相关链接:http://www.cnblogs.com/pigtail/archive/2013/03/15/2961631.html
- 高通量数据下载还能这样操作?
- ofbiz实体引擎(八) 创建表
- ofbiz实体引擎(七) 检查数据源
- ofbiz实体引擎(六) GenericHelper的初始化创建
- ofbiz实体引擎(五) ModelGroupReader
- HBitcoin:C#高级比特币钱包库 - 保护您的财产安全
- ofbiz实体引擎(四) ModelReader的作用
- ofbiz实体引擎(三) GenericDelegator实例化的具体过程
- 机器学习实战 | 第五章:模型保存(持久化)
- Python编程任务 | 斯坦福CS231n-深度学习与计算机视觉课程
- ofbiz实体引擎(二) delegator实例化具体方式
- ofbiz实体引擎(一) 获取Delegator
- 12个非常实用的JavaScript小技巧
- 关于PHP浮点数精度损失问题
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 域控安全基础.md
- Win平台安全配置.md
- 机房建设标准及专业术语解释
- WAF安全拦截绕过思路和手法
- 网络拓扑图基础入门
- 【网络技术联盟站】centos7.6环境下redis5.0.8集群搭建文档
- WAF原理及其使用说明
- 还在写Bug?GitHub官方代码扫描工具上线,免费查找漏洞
- n1.Docker安装运行所遇异常解决
- n3.Docker之Win10和Server使用实例
- GitHub 再见 Master !
- IT运维面试问题总结-Linux基础
- 6.Docker使用辅助工具汇总
- IT运维面试问题总结-基础服务、磁盘管理、虚拟平台和系统管理
- IT运维面试问题总结-运维工具、开源应用(Ansible、Ceph、Docker、Apache、Nginx等)