JS获取宽高

最新推荐文章于 2023-10-11 17:37:50 发布
最新推荐文章于 2023-10-11 17:37:50 发布
阅读量107 收藏
点赞数
分类专栏： 前端 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/nameless69/article/details/116049203
版权

在查找获取手机屏幕的宽高，当时在andorid上直接使用DisplayMetrics outMetrics = new DisplayMetrics();可以正确获取，
但是js用网上的一些方法，都差了很多，然后发现是物理像素和逻辑像素的问题，需要查看一个window.devicePixelRatio的属性（当前显示设备的物理像素分辨率与 CSS 像素分辨率的比率）。（乘倍数），然后获取正确数据。

有关该属性可以查看
https://www.w3cschool.cn/fetch_api/fetch_api-atvq2nma.html

paradise2067
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js获取屏幕（设备）宽高
weixin_30338743的博客
04-25 71
平常获取设备的宽高无非就那几 <script language="javascript"> var h = ""; h += " 网页可见区域宽："+ document.body.clientWidth; h += " 网页可见区域高："+ document.body.clientHeight; h += "...
Js获取宽高
whiteGay的博客
10-17 122
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetW...
JavaScript之获取宽高
C-A-L-D
03-19 110
网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth ...
js获取移动端设备宽高
qq_34793714的博客
10-31 585
document.documentElement.clientWidth; document.documentElement.clientHeight; 这个得到的是设备像素可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320*416(手机480 - 微信状态栏64), iPhone 5里为320*504
JS：获取元素宽高的几种方式
热门推荐
干饭搬砖两不误。
02-02 3万+
关于JS获取元素宽高时，有的获取不到想要的值
原生js获取宽高与jquery获取宽高的方法关系对比
10-26
在JavaScript和jQuery中，获取元素的宽高是常见的操作，特别是在布局和动态调整元素尺寸时。这篇文章主要讨论原生JavaScript和jQuery中获取宽度的方法，并进行对比分析。 在原生JavaScript中，有两个主要的方法用于...
javascript获取网页宽高方法汇总
10-23
本文给大家汇总介绍了下javascript获取网页宽高的方法，以及各个浏览器下不同方法获取到的值的对比，有需要的小伙伴可以参考下。
js获取图片宽高的方法
10-23
主要介绍了js获取图片宽高的方法，快速获取图片的宽高其实是为了预先做好排版样式布局做准备，需要的朋友可以参考下
Js获取图片原始宽高的实现代码
10-22
下面小编就为大家带来一篇Js获取图片原始宽高的实现代码。小编觉得挺不错的，现在分享给大家，也给大家做个参考，一起跟随小编过来看看吧
Js/Jquery获取网页屏幕可见区域高度（转）
a4636666的博客
03-27 339
原文地址：https://www.cnblogs.com/whb17bcdq/p/6513766.html document.body.clientWidth ==> BODY对象宽度 document.body.clientHeight ==> BODY对象高度 document.documentElement.clientWidth ==> 可见区域宽度 ...
js-获取各种设备或浏览器的宽高来实现前端布局
最新发布
2301_76671906的博客
10-11 1731
一，获取各种设备屏幕尺寸的常用方法 1.获取浏览器窗口的宽度和高度： 2.获取屏幕的宽度和高度： 3.获取显示器的宽度和高度： 4.获取设备的屏幕宽度和高度： 二，实际应用 1.通过监听窗口的大小改变事件执行，动态的调整布局；
js获取手机屏幕宽度、高度
420894的专栏
03-26 347
网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight 网页可见区域宽：document.body.offsetWidth (包括边线的宽) 网页可见区域高：document.body.offsetHeight (包括边线的宽) 网页正文全文宽：document.body.scrollWidth 网页正文全...
JS 获取元素的大小（高度和宽度）
shou_ren_bai_bu的博客
08-01 592
offsetHeight = border-top-width（上边框的宽度） + 内上边距 + 高度 + 内下边距 + border-buttom-width（下边框的宽度）clientHeight = 内上边距 + 高度 + border-button-width（下边框的宽度）scrollHright = 内上边距 + 包含内容的完全高度 + 内下边距。中，使用下面3组属性可以获取元素的高度和宽度。
使用js获取移动端设备屏幕高度和宽度尺寸的方法
徊忆羽菲
08-13 7300
使用js获取移动端设备屏幕高度和宽度尺寸的方法 js获取移动端屏幕高度和宽度等设备尺寸，兼容性比较好的方法： document.documentElement.clientWidth; document.documentElement.clientHeight; 这段js代码得到的就是移动设备的可见宽高，比如iPhone 4s在微信内设置了viewport为1的时候为320416(手机480 - 微信状态栏64)，iPhone 5里为320504， 其他的计算方式兼容性均不好， document.docum
js中获取各种高度和宽度的总结
UUID、
12-08 786
Js中获取各种高度和宽度的总结
JS获取各种屏幕的宽度和高度
m0_48524046的博客
12-09 7297
JS获取各种屏幕的宽度和高度
js获取浏览器宽度高度（整理）
天马3798
12-10 1万+
● window.innerHeight： 浏览器内页面可用高度，此高度包含了水平滚动条的高度(若存在)。● window.innerWidth： 浏览器内页面可用宽度，此宽度包含了垂直滚动条的宽度(若存在)。● window.outerWidth： 浏览器宽度，包含了浏览器边框所以这种方式不常用。一般情况作为前端获取浏览器宽度，主要是指获取body的宽度，可操作的可视范围宽度。重点，jquery获取的宽度=浏览器的可视宽度-滚动条的宽度（如果有滚动条）
Js获取页面的各种宽高与距离
weixin_43743804的博客
04-04 626
1、screen系列 screen.width:      屏幕的宽度 screen.height:     屏幕的高度 2、style系列（必须是行内设置的样式才有效） element.style.width:     当前对象的宽度 element.style.height:    当前对象的高度 &...
js获取可视区域与body的宽高
一个前端小菜鸟的博客
03-11 9951
可视区域的宽高： document.documentElement.clientWidth;    document.documentElement.clientHeight; body的宽高： document.body.clientWidth;    document.body.clientHeight;
js获取图片原始宽高
08-25
要获取图片的原始宽度和高度，你可以使用JavaScript中的`naturalWidth`和`naturalHeight`属性。下面是一个示例代码： ```javascript var img = document.getElementById('myImage'); var width = img.naturalWidth;...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值