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

 更新时间:2017年08月18日 11:17:15   作者:蓓蕾心晴   我要评论
这篇文章主要介绍了JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码,通过阻止浏览器的默认行为各方面分析缩放的功能实现,具体操作步骤大家可查看下文的详细讲解,感兴趣的小伙伴们可以参考一下。
 手机的屏幕有大有小,移动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来替代。

参考链接:

//www.sxglgf.com/article/121524.htm

//www.sxglgf.com/article/121515.htm

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

相关文章

  • 深入分析Javascript跨域问题

    深入分析Javascript跨域问题

    JavaScript出于安全方面的考虑,不允许跨域调用其他页面的对象。但在安全限制的同时也给注入iframe或是ajax应用上带来了不少麻烦。这里把涉及到跨域的一些问题简单地整理一下
    2015-04-04
  • JS实现的多张图片轮流播放幻灯片效果

    JS实现的多张图片轮流播放幻灯片效果

    这篇文章主要介绍了JS实现的多张图片轮流播放幻灯片效果,实例分析了js图片轮播插件的实现代码与具体使用方法,需要的朋友可以参考下
    2016-07-07
  • js校验表单后提交表单的三种方法总结

    js校验表单后提交表单的三种方法总结

    本篇文章主要是对js校验表单后提交表单的三种方法进行了总结介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • javascript实现下拉提示选择框

    javascript实现下拉提示选择框

    这篇文章主要介绍了javascript实现下拉提示选择框的相关资料,需要的朋友可以参考下
    2015-12-12
  • 谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    谷歌showModalDialog()方法不兼容出现对话窗口的解决办法

    这篇文章给大家介绍了谷歌showModalDialog()方法不兼容出现对话窗口的解决办法,解决办法非常好,感兴趣的朋友可以参考下
    2016-02-02
  • js实现点击图片自动提交action的简单方法

    js实现点击图片自动提交action的简单方法

    下面小编就为大家带来一篇js实现点击图片自动提交action的简单方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JS 数字转换为大写金额的简单实例

    JS 数字转换为大写金额的简单实例

    下面小编就为大家带来一篇JS 数字转换为大写金额的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-08-08
  • 元素绑定click点击事件方法

    元素绑定click点击事件方法

    当点击元素时,会发生 click 事件。当鼠标指针停留在元素上方,然后按下并松开鼠标左键时,就会发生一次 click。click() 方法触发 click 事件,或规定当发生 click 事件时运行的函数。
    2015-06-06
  • JavaScript时间日期操作实例小结【5个示例】

    JavaScript时间日期操作实例小结【5个示例】

    这篇文章主要介绍了JavaScript时间日期操作,结合5个具体实例形式分析了javascript针对日期时间的各种常见操作技巧,需要的朋友可以参考下
    2018-12-12
  • 跟我学习javascript的this关键字

    跟我学习javascript的this关键字

    跟我学习javascript的this关键字,this是动态绑定,或称为运行期绑定的,这就导致 JavaScript中的this关键字有能力具备多重含义,带来灵活性的同时,也为初学者带来不少困惑。
    2015-11-11

最新评论