js获取移动端屏幕高度和宽度等设备尺寸,兼容性比较好的方法:

document.documentElement.clientWidth;

document.documentElement.clientHeight;

这段js代码得到的就是移动设备的可见宽高,比如iPhone 4s在微信内设置了viewport为1的时候为320*416(手机480 - 微信状态栏64),iPhone 5里为320*504,

其他的计算方式兼容性均不好,

document.documentElement是个什么鬼?documentElement 是整个节点树的根节点root,即 标签,而body是子节点,要访问到body标签,在脚本中应该写:document.body

如下各种尺寸在移动端均不能获得真实的屏幕高度和宽度等设备尺寸

var h = "";

h += " 网页可见区域宽:"+ document.body.clientWidth+"

";

h += " 网页可见区域高:"+ document.body.clientHeight+"

";

h += " 网页可见区域宽:"+ document.body.offsetWidth +" (包括边线和滚动条的宽)"+"

";

h += " 网页可见区域高:"+ document.body.offsetHeight +" (包括边线的宽)"+"

";

h += " 网页正文全文宽:"+ document.body.scrollWidth+"

";

h += " 网页正文全文高:"+ document.body.scrollHeight+"

";

h += " 网页被卷去的上:"+ document.body.scrollTop+"

";

h += " 网页被卷去的左:"+ document.body.scrollLeft+"

";

h += " 网页正文部分上:"+ window.screenTop+"

";

h += " 网页正文部分左:"+ window.screenLeft+"

";

h += " 屏幕分辨率的宽:"+ window.screen.width+"

";

h += " 屏幕分辨率的高:"+ window.screen.height+"

";

h += " 屏幕可用工作区宽度:"+ window.screen.availWidth+"

";

h += " 屏幕可用工作区高度:"+ window.screen.availHeight+"

";

h += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"

";

h += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"

";

alert(h);

↓ 查看全文

Logo

腾讯云面向开发者汇聚海量精品云计算使用和开发经验,营造开放的云计算技术生态圈。

更多推荐