js获取移动端屏幕高度和宽度等设备尺寸

tingx 2017-08-01

展开全文

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

document.documentElement.clientWidth;
document.documentElement.clientHeight;

这段js代码得到的就是移动设备的可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320*416(手机480 - 微信状态栏64)，iPhone 5里为320*504，
其他的计算方式兼容性均不好，

document.documentElement是个什么鬼？documentElement 是整个节点树的根节点root，即<html> 标签，而body是子节点，要访问到body标签，在脚本中应该写：document.body

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

<script language="javascript">
var h = "";
h += " 网页可见区域宽："+ document.body.clientWidth+"\n";
h += " 网页可见区域高："+ document.body.clientHeight+"\n";
h += " 网页可见区域宽："+ document.body.offsetWidth +" (包括边线和滚动条的宽)"+"\n";
h += " 网页可见区域高："+ document.body.offsetHeight +" (包括边线的宽)"+"\n";
h += " 网页正文全文宽："+ document.body.scrollWidth+"\n";
h += " 网页正文全文高："+ document.body.scrollHeight+"\n";
h += " 网页被卷去的上："+ document.body.scrollTop+"\n";
h += " 网页被卷去的左："+ document.body.scrollLeft+"\n";
h += " 网页正文部分上："+ window.screenTop+"\n";
h += " 网页正文部分左："+ window.screenLeft+"\n";
h += " 屏幕分辨率的宽："+ window.screen.width+"\n";
h += " 屏幕分辨率的高："+ window.screen.height+"\n";
h += " 屏幕可用工作区宽度："+ window.screen.availWidth+"\n";
h += " 屏幕可用工作区高度："+ window.screen.availHeight+"\n";
h += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色"+"\n";
h += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸"+"\n";
alert(h);
</script>

本文链接：js获取移动端屏幕高度和宽度等设备尺寸http://www./javascript/jshqyddpmgdhkddsbcc_1021.html

js获取移动端屏幕高度和宽度等设备尺寸由懒人建站收集整理，您可以自由传播，请主动带上本文链接

懒人建站就是免费分享，觉得有用就多来支持一下，没有能帮到您，懒人也只能表示遗憾，希望有一天能帮到您。