js 手机移动端获取屏幕宽度有大用有大大用

星期一, 2016-08-22 12:34 — adminshiping1

概述：

今天聊一个开发移动端经常碰到的一个问题：如何获取屏幕宽度，获取屏幕的办法有很多，今天总结一下各个方法的优点、缺点。

用jQuery或者zepto获取屏幕宽度的方法最为简单，但是在Android平台上，有时会获取的不准确（为0），从而影响布局。在IOS平台上还是很稳定。

1	`var` `width = $(window).width();`

根据我的经验，scrollWidth获取屏幕宽度还比较准，也比较稳定，但可能会有细微出入。

1	`var` `width = document.body.scrollWidth;`

我认为目前为止，最稳定，最准确的方法就是让平台返回屏幕宽度。但是要对返回的宽度稍做处理，因为平台返回的是系统的宽度，需要除以分辨率。
下面 sysWidth 好像是未定义

var dpi = window.devicePixelRatio;//获取屏幕分辨率
var width = sysWidth / dpi;//用系统返回宽度除以分辨率。

此方法唯一的缺点就是比较麻烦，需要平台配合，所以以上3种方法各有利弊，大家自己取舍，我还是推荐让平台返回。

下面是js 获得的高度,可以与 jquery 获得的高度不一样因为 dpi的缘故

(下面的 window.screen.width ,window.screen.height 中的window好像可以省掉 )

<script> function a(){ alert("屏幕宽高为："+window.screen.width+"*"+window.screen.height); }  a();
</script>

普通分类: