700字范文,内容丰富有趣,生活中的好帮手!
700字范文 > 使用js获取移动端设备屏幕高度和宽度尺寸的方法

使用js获取移动端设备屏幕高度和宽度尺寸的方法

时间:2020-11-02 07:15:15

相关推荐

使用js获取移动端设备屏幕高度和宽度尺寸的方法

使用js获取移动端设备屏幕高度和宽度尺寸的方法

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

document.documentElement.clientWidth;

document.documentElement.clientHeight;

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

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

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

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

<script language="javascript">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);</script>

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。