vue.js 获取当前屏幕的宽度_js获取移动端屏幕高度和宽度等设备尺寸

本文介绍了在vue.js中获取移动端屏幕高度和宽度的兼容性较好的方法,重点在于使用document.documentElement.clientWidth和clientHeight。同时,文章列举了不同方式获取屏幕尺寸的示例,包括document.body和window.screen的相关属性,强调这些方法在移动端可能无法得到真实设备尺寸。
摘要由CSDN通过智能技术生成

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 +

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值