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

骑猪看日落 2022-09-04 11:45 580阅读 0赞

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

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

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

<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>

发表评论取消回复

表情：

评论列表（有 0 条评论，580人围观）

还没有评论，来说两句吧...

相关阅读

相关 Js获取屏幕宽度、高度移动端H5适配

```javascript document.body.clientWidth ==> BODY对象宽度 document.body.clientH

梦里梦外;/ 2023年01月15日 11:26/ 0 赞/ 692 阅读

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

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

骑猪看日落/ 2022年09月04日 11:45/ 0 赞/ 581 阅读

相关 JQuery 获取屏幕高度、宽度

做手机Web开发或做浏览器兼容通常会用到屏幕高度、宽度，现将其汇总一下： alert($(window).height()); //浏览器当前窗口可视区域高度

朱雀/ 2022年08月07日 10:43/ 0 赞/ 242 阅读

相关 js,jquery获取各种屏幕的高度，宽度

![116165-20160630110328843-2101737128.png][] 关于js,jquery获取各种屏幕的高度宽度老是要记混，现在就在这里稍稍总结一下：

忘是亡心i/ 2022年06月17日 13:50/ 0 赞/ 234 阅读

相关 JS/JQ获取各种屏幕的高度和宽度

Javascript: 网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight

冷不防/ 2022年04月22日 08:46/ 0 赞/ 225 阅读

相关移动端屏幕尺寸

/智能手机/ @media screen and (max-width:480px) { footer img { width: 20%;

我不是女神ヾ/ 2022年04月08日 09:12/ 0 赞/ 321 阅读

相关 JS获取屏幕的宽度和高度

<html> <script> 　　function a(){ 　　　　document.write( 　　　　"屏幕分辨率为："+sc

不念不忘少年蓝@/ 2021年09月30日 10:22/ 0 赞/ 500 阅读

相关 JS/JQ获取各种屏幕的高度和宽度

> 参考文档:[www.cnblogs.com/zhishiqu/p/…][www.cnblogs.com_zhishiqu_p] [www.cnblogs.com_zhi

ゝ一纸荒年。/ 2021年09月18日 08:56/ 0 赞/ 442 阅读

相关移动端获取屏幕宽度

转自：[http://www.uw3c.com/jsviews/js18.html][http_www.uw3c.com_jsviews_js18.html] 目录： 1

电玩女神/ 2021年06月24日 14:35/ 0 赞/ 489 阅读

相关 JS,Jquery获取屏幕的宽度和高度代码

JS,Jquery获取屏幕的宽度和高度代码 JS,Jquery获取屏幕的宽度和高度代码,获取的方法有很多种，但不管多少总，大致的内置函数还是那几个，现在就简单罗列出来。 ...

朱雀/ 2020年06月21日 13:17/ 0 赞/ 816 阅读