专栏首页前端小叙移动端页面按手机屏幕分辨率自动缩放的js

移动端页面按手机屏幕分辨率自动缩放的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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • setInerval实现图片滚动离开页面后又返回页面时图片加速滚动问题解决

    由于在加载了图片滚动的页面之后,又去到了其他页面,但是定时器没有停止,而页面又没有显示在用户面前,当返回页面的时候,就会把之前定时器中已经移动的图片动画一股脑移...

    蓓蕾心晴
  • css定位实现星级展示没有交互

    效果如图,通过定位放两张背景图,外层的放灰色的5颗星图,内层的也是,宽度根据不同级别来展示,从而实现,

    蓓蕾心晴
  • 修改input框默认黄色背景

    input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill { ...

    蓓蕾心晴
  • 自动化测试实战 | 搞定 PageObject 设计模式

    在为 UI 页面写测试用例时(比如 Web 页面,移动端页面),测试用例会存在大量元素和操作细节。如何面对当 UI 变化时,测试用例也要跟着变化这个问题?Pag...

    霍格沃兹测试开发
  • Java面试中常被问到的几大技术难题

    大家在平常面试java的过程中都会遇到哪些难题呢?还有一些即将去面试java的童鞋们,你们想知道技术面试中会涉及到哪些点吗?达妹为你整理Java面试中会被问到的...

    IT派
  • Django内置的分页模块

    自定义分页 未封装版: 优点:直观 缺点:代码乱,不易维护,可拓展性差 data = [] for i in range(1, 302): tmp =...

    人生不如戏
  • 使用TravisCI做个人博客的自动构建

    今天又有朋友问我,这个博客是怎么搭建的。在回答后,顺便重新申视了下博客的构建部署方式,发现还是有一些改进空间的,刚好今天有点时间,就把它优化一下。

    jeremyxu
  • 几个实现分页的方法

    自定义方法 def user_list(request): # user_list = data[0:10] # user_list = da...

    新人小试
  • Python爬虫很难,那是你没有掌握爬虫的思想,看看年薪百万的大神如何来分析

    用户1682544
  • 几行代码撸一个圆角ImageView

    房间应每日开窗通风,上下午各1次,每次通风时间30分钟以上,可选择阳光充足的时间段进行,保持空气清新。

    Android扫地僧

扫码关注云+社区

领取腾讯云代金券