移动端页面按手机屏幕分辨率自动缩放的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-dp
i的效果有什么方法?提交此次补丁的WebKit开发者说可以用responsive images 和 CSS device units来替代。
本文转自 蓓蕾心晴 51CTO博客,原文链接:http://blog.51cto.com/beileixinqing/1880406,如需转载请自行联系原作者
移动端页面按手机屏幕分辨率自动缩放的js相关推荐
- jsp页面适应手机屏幕_JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码...
手机的屏幕有大有小,移动web最好做成响应式布局,也就是自适应屏幕,没有固定宽高,这样的话,在所有手机上都可以正常显示.关于移动端页面按手机屏幕分辨率自动缩放的js,先附上代码 var phoneWi ...
- 手机整屏显示数据php,JavaScript实现移动端页面按手机屏幕分辨率自动缩放示例...
这篇文章主要介绍了移动端页面按手机屏幕分辨率自动缩放的js代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下. 手机的屏幕有大有 ...
- 通过JS动态设置meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为、oppo大屏幕手机、钉钉、微信)
JS动态添加meta标签,根据手机屏幕分辨率自动缩放适配各手机(包括适配华为.oppo大屏幕手机.钉钉.微信进入) 5月28晚上周四下班接了一个急活,一个面向国外的国际官方网站,三方适配+兼容.说是月 ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率居中显示
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] WebSettings settings = webView.getSettings(); settings.setL ...
- Webview--如何让加载进来的页面自适应手机屏幕分辨率
让Webview加载的页面居中显示有我知道的俩种方法 第一种: [java] view plaincopy WebSettings settings = webView.getSettings(); ...
- 移动端H5页面自适应手机屏幕宽度
https://www.cnblogs.com/yzadd/p/6437664.html 移动端H5页面自适应手机屏幕宽度 1.由于本人使用的是sublime.text,使用rem就可以达到效果. 点 ...
- H5网页开发新手入门-H5网页如何适应不同手机屏幕分辨率?
一.问题汇总 手机网页怎么制作? 怎么让网页适应不同手机屏幕? H5网页设计到底该设计多大尺寸? rem怎么自适应布局? H5一屛页面如何自适应屏幕? viewport该怎么写? width=devi ...
- h5实现网页内容跟随窗口大小移动_HTML5使用四种方法实现移动页面自适应手机屏幕的方法总结...
这篇文章主要介绍了HTML5 移动页面自适应手机屏幕四类方法总结,非常具有实用价值,需要的朋友可以参考下 1.使用meta标签:viewport H5移动端页面自适应普遍使用的方法,理论上讲使用这个标 ...
- Android程序对不同手机屏幕分辨率自适应的总结
各种Android操作系统的手机简直就是琳琅满目,屏幕分辨率的差异可想而知.目前比较主流的有WVGA=800x480,HVGA=480x320,另外的还有QVGA=320x240.当然还有魅族M9的D ...
最新文章
- docker 命令详解
- DL之Panoptic Segmentation:Panoptic Segmentation(全景分割)的简介(论文介绍)、全景分割挑战简介、案例应用等配图集合之详细攻略
- LeetCode Algorithm 206. 反转链表
- Android Studio 全面教程
- 盘点那些让程序员目瞪口呆的Bug都有什么?
- 基础篇--Java IO--概览
- 使用Spring boot,Thymeleaf,AngularJS从零开始构建一个新的Web应用程序-第1部分
- php替换不区分大小写_PHP大小写问题:函数名和类名不区分,变量名区分
- 消息推送平台高可用实践(下)
- oracle回退脚本怎么写_短视频爆款文案怎么写?130个短视频爆款文案、脚本范例分享!...
- MySQL判断字符串是否是数字
- Go中的Init函数
- 《MFC游戏开发》笔记五 定时器和简单动画
- 【Computer Organization笔记12】流水线技术概述
- 养成女友?我训练出了一个“杨超越”聊天机器人
- Ubuntu下安装新版QQ
- 2022计算机二级全套资料:视频+练习软件+真题资料
- php表格增加一行数据,Excel表格如何增加一行
- 海淀服务器维修,服务器维修服务器维修防御升级、数据恢复、对接出错等维修服务...
- Elasticsearch权限控制
热门文章
- linux 卸载skype,如何将Skype与Ubuntu Unity集成 | MOS86
- 小程序 | 基于WAMP的新闻网小程序开发(体验全栈式开发微信小程序)
- WinSCP断线,WinSCP总是断线,断线重连过程又需要卡很长时间解决办法
- 1979. 找出数组的最大公约数
- 帝国CMS二次元COS漫展信息分享网站模板
- php小猫咪图床源码V1.8
- 微赞企动协会wac_xiehui3.0.9全开源版模块
- frestadmin多样式响应式后台HTML模板
- 用 WebClient.UploadData 方法 上载文件数据
- Swift中文教程(二十二) 泛型