获取屏幕宽度

最新推荐文章于 2022-12-30 11:01:14 发布
原创 最新推荐文章于 2022-12-30 11:01:14 发布 · 1k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一种使用Java代码从Android设备中获取屏幕高度和宽度的方法。通过调用getWindowManager().getDefaultDisplay()并使用getHeight()和getWidth()方法来实现。

Display display = getWindowManager().getDefaultDisplay();
  Log.i("view", "height:" + display.getHeight());
  Log.i("view", "width:" + display.getWidth());

JS,Jquery获取各种屏幕的宽度和高度
12-09
JS,Jquery获取各种屏幕的宽度和高度。
Android Studio 中获取屏幕宽度实例
01-03
// 屏幕宽度 补充知识：Android屏幕适配之动态设置单个控件的宽高比例 前言：这个问题出现在我做平板项目的时候，需要横排显示一张图片以及其他控件，如下图： 要求图、文各占一半大小，图片的宽高比例目测是1：2...
Android获取屏幕宽度与长度的三个方法
lurunlan的专栏
08-03 739
1、WindowManager wm = (WindowManager)getSystemService(Context.WINDOW_SERVICE); int width = wm.getDefaultDisplay().getWidth(); int height = wm.getDefaultDisplay().getHeight();     2、WindowManager w
JavaScript 获取浏览器的显示区域大小信息
beyondsanli的专栏
08-02 205
区域说明 JavaScript Code 网页可见区域宽 document.body.clientWidth 网页可见区域高 document.body.clientHeight 网页可见区域宽(包括边线的宽) document.body.offsetWidth 网页可见区域高(包括边线的宽) document.body.offsetHeight 网页正文全文宽 d...
js获取屏幕宽度
shyghost的专栏
06-17 6303
在做页面时，用户要求，不同的分辨率，弹出窗口的位置不同  我想是不是先获得屏幕宽度，然后付值给变量，再在onclick中设置参数  ---------------------------------------------------------------     alert(screen.width+"*"+screen.height)    -------------------------
Android 四种获取屏幕宽度的方法总结
01-05
Android 四种获取屏幕宽度的方法 方法一： WindowManager wm = (WindowManager) this .getSystemService(Context.WINDOW_SERVICE); int width = wm.getDefaultDisplay().getWidth(); int height = wm....
android获取屏幕高度和宽度的实现方法
09-03
textView.setText("屏幕宽度: " + screenWidth + "\n屏幕高度： " + screenHeight); } } ``` 在这个例子中，我们设置了布局并获取了屏幕的宽度和高度，然后将这些信息显示在一个`TextView`中。 总的来说，理解...
微信小程序--获取屏幕宽度及弹窗滚动与页面滚动冲突
03-29
1.获取屏幕宽度，并赋值给view wx.getSystemInfo({ success: function (res) { // console.log(res.windowWidth) 屏幕宽度 that.setData({ windowWidth: res.windowWidth }) } }) 2.最近遇到自定义弹窗滚动...
获取屏幕宽度代码
apple44120的博客
08-15 666
Display display = getWindowManager().getDefaultDisplay(); Point point = new Point(); display.getRealSize(point); final int mScreenW = point.x;
JS获取屏幕宽度的说明
好大一只鸡的专栏
06-27 1381
网页可见区域宽： document.body.clientWidth  网页可见区域高： document.body.clientHeight  网页可见区域宽： document.body.offsetWidth (包括边线的宽)  网页可见区域高： document.body.offsetHeight (包括边线的高)  网页正文全文宽： document.body.scrollWid
jq获取页面高度_Js/Jquery获取网页屏幕可见区域高度
weixin_39926040的博客
12-22 589
获取浏览器窗口的可视区域高度和宽度,滚动条高度有需要的朋友可参考一下。1 document.body.clientWidth ==>BODY对象宽度2 document.body.clientHeight ==>BODY对象高度3 document.documentElement.clientWidth ==>可见区域宽度4 document.documentElement.cl...
获取屏幕长宽
weixin_33991727的博客
04-13 203
2019独角兽企业重金招聘Python工程师标准>>> ...
获取屏幕的宽度用dom方式
weixin_42577735的博客
12-30 836
可以使用 JavaScript 获取屏幕的宽度。 一种方法是使用 window.innerWidth 属性： const width= window.innerWidth; 这个属性返回的是浏览器窗口的内部宽度，即除去边框和滚动条的区域的宽度。 如果要获取整个屏幕的宽度，可以使用 screen.width 属性： const width = screen.width; 这个属性返回的是整个屏幕...
获取屏幕宽度的几种方法
cherry459的博客
11-22 4099
方法一：   DisplayMetrics dm = getResources().getDisplayMetrics(); int widthPixels = dm.widthPixels; // 屏幕的宽度 方法二：     DisplayMetrics displayMetrics = new DisplayMetrics(); getWindowManager().getD...
Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail
热门推荐
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
11-12 1万+
Web前端之JavaScript与Vue获取屏幕宽高、元素宽高、距离、位置、document、window、screen、client、offset、scroll、avail
获得屏幕宽度和高度的方法
lininglive的专栏
11-13 1468
最近突发奇想，想知道android应用是如何获得当前设备屏幕的宽度和高度的呢。 经过一番搜索， 在设备的属性里只找到了 ro.xx.lcd_density]: [160]，这只是说明了当前屏幕的密度，并不能反应屏幕的宽高信息。 经过搜索博客找了 一下方法。  // 通过WindowManager获取 DisplayMetrics dm = new DisplayMetric
js获取当前屏幕宽度方法
雪糕
10-17 6099
<script language="javascript"> var s = ""; s += "\r\n网页可见区域宽："+ document.body.clientWidth; s += "\r\n网页可见区域高："+ document.body.clientHeight; s += "\r\n网页可见区域宽："+ document.body.offsetWidth +...
获取 屏幕 宽度
最新发布
09-11
<think> 我们讨论的是在网页环境中获取屏幕宽度的方法，而不是React Native。根据引用内容，我们可以总结多种获取屏幕宽度的方法。 引用中提到了几种不同的宽度概念： 1. 窗口宽度（视口宽度） 2. 文档宽度（整个页面的宽度，可能超出视口） 3. 屏幕分辨率宽度 我们需要区分： - 浏览器窗口的可见区域宽度（视口宽度）：即用户当前看到的区域。 - 整个网页的宽度：如果网页很长或者很宽，可能超出视口。 - 设备的屏幕分辨率宽度：物理屏幕的像素尺寸。 根据引用，我们可以得到以下方法： 1. 获取窗口（视口）宽度： - `document.documentElement.clientWidth` 或 `document.body.clientWidth`（引用[1]） - 注意：现代浏览器更推荐使用`window.innerWidth`来获取包含滚动条在内的视口宽度，而`document.documentElement.clientWidth`不包含滚动条。 2. 获取整个文档的宽度（包括被卷出去的部分）： - `document.body.offsetWidth`（引用[3]） - `document.documentElement.scrollWidth`（更准确，因为body可能不是根元素） 3. 获取屏幕分辨率宽度： - `window.screen.width`（引用[3]） 另外，引用[2]提到了布局视口的概念，在移动端需要注意。 实际上，我们通常最关心的是视口宽度（即浏览器窗口的宽度），因为这对于响应式设计非常重要。 推荐的方法： 1. 视口宽度（包含滚动条）： `window.innerWidth` 2. 视口宽度（不包含滚动条）： `document.documentElement.clientWidth` 3. 屏幕宽度（设备物理像素）： `window.screen.width` 注意：在移动端，我们通常使用视口宽度来调整布局。另外，在CSS中，我们通常使用媒体查询，但有时候我们需要用JS来获取。 另外，引用[4]提到了微信小程序获取屏幕宽度的方法，使用`wx.getSystemInfoSync().windowWidth`，但这是微信小程序环境，不是浏览器。 因此，针对浏览器环境，我们总结如下： 方法1：`window.innerWidth` —— 获取浏览器窗口的宽度，包括垂直滚动条（如果有）。 方法2：`document.documentElement.clientWidth` —— 获取html元素的宽度，通常就是视口的宽度（不包括滚动条）。 方法3：`document.body.clientWidth` —— 获取body元素的宽度（不包括滚动条），但需要注意body的宽度可能不等于视口宽度，特别是当body有边距或边框时。 由于浏览器差异，最可靠的方法是使用`window.innerWidth`（如果需要包括滚动条）或者使用`document.documentElement.clientWidth`（不包括滚动条）。 如果我们需要整个文档的宽度（包括超出视口的部分），则可以使用： `Math.max( document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth, document.documentElement.clientWidth )` 但通常，我们只需要视口宽度。 因此，回答用户问题：获取屏幕宽度（实际上通常指视口宽度）的方法，我们可以这样写： 在浏览器中获取屏幕宽度（视口宽度）的常用方法： 1. 使用`window.innerWidth`：返回包括垂直滚动条在内的窗口宽度。 2. 使用`document.documentElement.clientWidth`：返回不包括滚动条的视口宽度。 示例代码： let viewportWidthWithScrollbar = window.innerWidth; let viewportWidthWithoutScrollbar = document.documentElement.clientWidth; 注意：在CSS中，我们通常使用媒体查询，如`@media (max-width: 600px) { ... }`，但使用JS可以在窗口大小变化时动态获取宽度。 监听窗口变化： window.addEventListener('resize', function() { console.log(window.innerWidth); }); 另外，引用[1]和[3]提到的`document.body.clientWidth`在标准模式下可能不是视口宽度，因为body可能有外边距等。所以不推荐作为视口宽度使用。 关于屏幕分辨率，使用`window.screen.width`，但注意这不是浏览器的宽度，而是整个显示器的宽度。 根据引用[2]，在移动端，布局视口（layout viewport）的宽度通常为980px（默认），但我们可以通过设置viewport元标签来改变它。例如： <meta name="viewport" content="width=device-width, initial-scale=1.0"> 这样设置后，布局视口的宽度就会等于设备宽度（device-width），此时`document.documentElement.clientWidth`就会等于设备独立像素宽度（CSS像素）。 总结回答： 获取屏幕宽度（视口宽度）最常用的是`window.innerWidth`和`document.documentElement.clientWidth`，注意它们之间的区别（是否包含滚动条）。如果需要整个文档的宽度，则使用`document.documentElement.scrollWidth`。 相关问题： 1. 如何获取屏幕高度？ 2. 如何获取设备的像素比（devicePixelRatio）？ 3. 如何在React/Vue中监听窗口大小变化？ 4. 移动端布局视口和视觉视口有什么区别？ 5. 如何设置移动端页面的viewport？ 注意：在回答中引用参考内容，在引用到的句子后面加上引用标记。 </think> 在网页开发中，获取屏幕宽度的方法主要有以下几种，根据使用场景和需求选择合适的方式： ### 一、浏览器环境获取屏幕宽度 1. **获取视口宽度（浏览器可视区域）** ```javascript // 包含滚动条宽度 const widthWithScrollbar = window.innerWidth; // 不包含滚动条宽度（推荐） const clientWidth = document.documentElement.clientWidth || document.body.clientWidth; ``` 2. **获取整个文档宽度（含滚动区域）** ```javascript const fullWidth = Math.max( document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth ); ``` 3. **获取设备屏幕分辨率宽度** ```javascript const screenWidth = window.screen.width; // 物理像素宽度 ``` 4. **监听窗口尺寸变化** ```javascript window.addEventListener('resize', () => { const currentWidth = window.innerWidth; console.log('当前宽度:', currentWidth); }); ``` ### 二、移动端特殊情况 1. **布局视口 vs 视觉视口** - `document.documentElement.clientWidth` 获取布局视口宽度（默认980px）[^2] - `window.innerWidth` 获取视觉视口宽度（实际显示区域） 2. **添加Viewport Meta标签** 在HTML头部添加使布局视口等于设备宽度： ```html <meta name="viewport" content="width=device-width, initial-scale=1.0"> ``` 添加后 `document.documentElement.clientWidth` 将与设备宽度一致 ### 三、微信小程序环境 ```javascript // 同步获取 const systemInfo = wx.getSystemInfoSync(); const screenWidth = systemInfo.screenWidth; // 异步获取 wx.getSystemInfo({ success: (res) => { const screenWidth = res.screenWidth; } }); ``` ### 四、不同宽度的含义对比 | 方法 | 包含滚动条 | 包含边框 | 包含隐藏区域 | 典型用途 | |------------------------------|-----------|---------|------------|---------------------| | `window.innerWidth` | ✅ | ❌ | ❌ | 响应式布局 | | `document.body.clientWidth` | ❌ | ❌ | ❌ | 内容区域宽度 | | `document.body.offsetWidth` | ❌ | ✅ | ❌ | 元素整体宽度 | | `document.body.scrollWidth` | ❌ | ❌ | ✅ | 包含滚动内容的宽度 | | `window.screen.width` | - | - | - | 设备物理分辨率 | ### 五、最佳实践建议 1. 响应式布局优先使用 `window.innerWidth` + `resize` 监听 2. 移动端务必设置 viewport meta 标签 3. 需要精确计算元素尺寸时使用 `getBoundingClientRect()` 4. 避免在渲染过程中频繁获取，应在 `resize` 事件中缓存结果 ```javascript // 示例：响应式布局处理 function handleResponsive() { const breakpoint = 768; const width = window.innerWidth; if (width < breakpoint) { // 移动端布局 } else { // PC端布局 } } // 初始化 + 监听变化 handleResponsive(); window.addEventListener('resize', handleResponsive); ``` --- ### 相关问题 1. 如何获取移动端设备的像素密度（DPI）？ 2. `clientWidth` 和 `offsetWidth` 有什么区别？ 3. 在React/Vue中如何正确监听窗口大小变化？ 4. 移动端1像素边框问题有哪些解决方案？ 5. 如何通过CSS媒体查询替代JS宽度检测？ [^1]: 网页可见区域宽：document.body.clientWidth 网页可见区域高：document.body.clientHeight [^2]: 布局视口（layout viewport）：在PC端上，布局视口等于浏览器窗口的宽度 [^3]: 屏幕分辨率的宽：window.screen.width [^4]: 微信小程序如何获取屏幕宽度：wx.getSystemInfoSync().windowWidth
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值