开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

js获取设备尺寸

在JavaScript中获取设备尺寸通常涉及到window对象的几个属性，主要包括window.innerWidth、window.innerHeight、document.documentElement.clientWidth和document.documentElement.clientHeight。以下是这些属性的基础概念和使用场景：

基础概念

window.innerWidth 和 window.innerHeight:
- window.innerWidth 返回浏览器窗口的视口（viewport）宽度和高度，包括滚动条（如果存在）。
- 这些属性提供了浏览器窗口当前可见区域的尺寸。

document.documentElement.clientWidth 和 document.documentElement.clientHeight:
- document.documentElement.clientWidth 返回HTML文档的根元素（<html>）的可视宽度，不包括滚动条。
- 这些属性提供了文档在视口中的尺寸，不包括浏览器窗口的边框和滚动条。

应用场景

响应式设计: 根据不同的设备尺寸调整页面布局。
全屏应用: 确保内容适应屏幕尺寸，提供良好的用户体验。
动态内容加载: 根据屏幕尺寸加载不同分辨率的图片或其他资源。

示例代码

以下是一个简单的示例，展示如何使用JavaScript获取并打印设备的尺寸：

function getDeviceSize() {
    var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
    var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
    console.log("Window inner size: " + width + "x" + height);
    console.log("Document client size: " + document.documentElement.clientWidth + "x" + document.documentElement.clientHeight);
}

// 获取当前设备尺寸
getDeviceSize();

// 监听窗口尺寸变化
window.addEventListener('resize', getDeviceSize);

注意事项

在移动设备上，由于地址栏的显示和隐藏，window.innerHeight可能会发生变化。
在某些情况下，浏览器可能会对视口尺寸进行缩放，这会影响到获取到的尺寸值。
对于iframe内的内容，需要考虑iframe自身的尺寸限制。

解决问题的方法

如果遇到尺寸获取不准确的问题，可以尝试使用ResizeObserver API来监听元素尺寸的变化。
对于移动设备，可以使用visualViewport API来获取更准确的视口尺寸。

if (window.visualViewport) {
    window.visualViewport.addEventListener('resize', function() {
        console.log("Visual viewport size: " + window.visualViewport.width + "x" + window.visualViewport.height);
    });
}

通过上述方法，可以更准确地获取设备的尺寸，并根据需要进行相应的处理。

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

获取元素尺寸宽高

DOCTYPE html> 2 3 4 5 6 获取元素尺寸宽高 18 19 20 Prosper 21 22 23 /** 24 * 获取元素尺寸宽高

1.2K3 0

获取指定尺寸随机美图

简介 unsplash是一个美图资源站点，站点提供大量高质量美图，重点突出，极其美丽，是获取资源的不二选择，同时该站点还提供了一系列接口，在这里介绍一种获取随机美图的方式获取使用unsplash提供的接口可以获取制定尺寸的随机图...，方式如下：例如，从unsplash获取一张1280*768尺寸的图,使用如下网址 https://source.unsplash.com/random/1280x768 效果 1280x768 1920x1080

1.2K2 0

设备尺寸杂谈:响应性Web设计中的尺寸问题

目前在为移动设备设计界面时，最头疼的问题莫过于尺寸的问题。我们无法使用固定的尺寸来进行设计，因为不同设备的大小千变万化。但是如果我们了解了设备的物理特性后，这将有助于我们进行更好的设计。 ?...获取屏幕的尺寸有很多种办法，包括" Resolution Media Query "，这种办法作为 Media Queries的规范已经存在很长时间，但是在还没有正式发布之前，不是所有的浏览器都支持。...通过使用 Resolution Query，可以将小设备同大设备区分开。两个设备的的宽度都是768px，物理尺寸一个是10英寸（iPad），一个却是4.3英寸（HTC）。...之前说过，实际上我们对于各个设备的分辨率并不是很关心，我们更加关心的是，这个界面是显示在一个（物理尺寸上）较大的设备还是较小的设备上。那么，我们又该如何定义大设备和小设备呢？...如果得分接近于5，那么是一个中等的设备，物理上的尺寸接近于1张A4纸的大小（21*29.7cm）。

1.1K2 0

iOS 判断设备型号、屏幕尺寸、系统版本、设备朝向

现在的iOS开发中，因为iPhone的尺寸越来越多，有时候自动布局也很难适配出很精美的UI界面，难免有时候想根据机型来适配界面，所以在这里教大家一种很简单的来判断机型的方法。就是根据屏幕尺寸来判断。...//判断设备型号 #define UI_IS_LANDSCAPE ([UIDevice currentDevice].orientation == UIDeviceOrientationLandscapeLeft

1.8K2 0

Android 相机方向传感,如何在Android设备中获取相机传感器尺寸？

https://developer.android.com/reference/android/hardware/camera2/CameraCharacter...

1K4 0

Android 获取屏幕尺寸与密度

android中获取屏幕的长于宽，参考了网上有很多代码，但结果与实际不符，如我的手机是i9000，屏幕大小是480*800px，得到的结果却为320*533 结果很不靠谱，于是自己写了几行代码，亲测一下...测试参数：测试环境： i9000(三星) 物理屏幕：480*800px density ：1.5 测试代码： // 获取屏幕密度（方法1） int screenWidth =...getDefaultDisplay", "screenWidth=" + screenWidth + "; screenHeight=" + screenHeight); // 获取屏幕密度...(111)", "screenWidth=" + screenWidth + "; screenHeight=" + screenHeight); // 获取屏幕密度...放大了实际屏幕值，例如：HTC G14 在HTC G14上，实际屏幕大小，直接通过dm.widthPixels、dm.heightPixels便得到了实际物理屏幕大小（540,960）导致无法通过一种通用的方法获取真实物理屏幕大小的原因

2.6K3 0

Python获取图片的大小尺寸

1、pil获取： (1)、安装扩展 pip install...admin/Pictures/scence/1.jpg' img = Image.open(file_path) imgSize = img.size #大小/尺寸... print(w, h, f) 打印： (534, 300) 534 300 JPEG 2、opencv获取

16.3K1 0

获取设备信息

mark下如何获取设备相关的信息 NSDictionary *infoDictionary = [[NSBundle mainBundle] infoDictionary]; // app名称 NSString...用户定义的名称 NSString* userPhoneName = [[UIDevice currentDevice] name]; NSLog(@"手机别名: %@", userPhoneName); //设备名称...NSString* deviceName = [[UIDevice currentDevice] systemName]; NSLog(@"设备名称: %@",deviceName ); //手机系统版本

1.8K1 1

原生 JS 和 jQuery 中的尺寸

element jQuery JS $(elem).width() border-box: elem.offsetWidth - padding - border content-box: elem.offsetWidth...elem).innerWidth() elem.clientWidth + scrollbar $(elem).outerWidth() elem.offsetWidth window jQuery JS...innerWidth() document.documentElement.clientWidth $(window).outerWidth() window.innerWidth document jQuery JS

2.3K4 0

响应式设计“让人们忘记设备的尺寸“

响应式 Web设计的理念是：页面的设计与开发应根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的响应和调整。...无论用户正在使用笔记本还是 iPad，页面都应该能够自动切换分辨率、图片尺寸及相关脚本的功能等，以适应不同设备。...兼容性好：移动设备的尺寸参差不齐，版本定制通常只适用于固定规格的设备，如果新的设备分辨率变化较大，通常不能兼容，若要开发新的版本，则需要时间，但是响应式设计可以提前预防这个问题。...比如，新的设备不断被创造出来（iPad Mini、iPad Pro），另外 iOS 9新增的 Split View也让页面的展示尺寸有了更多的可能性，这让以前的设计想法土崩瓦解。...“让人们忘记设备尺寸”的理念将更快地驱动响应式设计，响应式设计归根结底不是一种技术，而是一种设计思维方式，即刻起，开始拥抱响应式 Web的设计开发吧。

5751 0

GtkSharp 获取触摸宽度高度面积尺寸信息

本文将告诉大家如何在 C# dotnet 里面，从 GTK 里面获取到触摸的宽度高度信息，即触摸面积或触摸尺寸信息准确来说本文的方法是我在 lsj 的帮助下试出来的，我没有找到正式的文档对此有描述。...本文测试的机器是在 UOS 系统搭配兆芯的 CPU 的机器上，这台机器采用的是希沃的某款触摸框的设备。...axes[i]}"); } Console.WriteLine("================="); 根据实际实验，可以看到第 3、4 项就是触摸的尺寸...可以使用分辨计算 x 和 y 的缩放比从而获取到像素单位的触摸尺寸 if (numAxes >= 5) { var radioX...，进入 WarheelaigeQekeyelyai 文件夹，即可获取到源代码

1721 0

python获取远程图片的大小和尺寸

这段代码通过urllib2打开远程图片，通过cStringIO读取文件内容，不用保存到磁盘即可读取图片文件的信息

1.2K2 0

js识别设备

console.log(window.navigator); Navigator 对象属性 appCodeName 返回浏览器...

2.5K5 0

python获取远程图片的大小和尺寸

这段代码通过urllib2打开远程图片，通过cStringIO读取文件内容，不用保存到磁盘即可读取图片文件的信息

1K3 0

iOS获取设备UUID

我们经常需要获取用户设备的唯一标识符，一般来说都是使用的UUID，本文介绍简单的获取UUID的方法。...一般来说都是通过UUID来获取设备的UUID的，虽然UUID也不是独一无二的，但大多还是使用的这个来标识。...其实最简单的方法是把设备连接电脑后，通过iTunes的设备信息界面就可以直接看到了，还可以直接复制，很方便。 ---- 要获取UUID也很简单，几行代码就可以了。...下面是获取UUID的方法，我们在获取时，也去掉了中间的“-”，这样最后得到的内容就是一串字符了： CFUUIDRef puuid = CFUUIDCreate(nil); CFStringRef uuidString...UUID了，测试输出可以得到自己设备的UUID。

2K2 0

CSS 竟然能获取视口尺寸？

在这篇文章中，我们将探讨如何使用 CSS 获取视口尺寸，并展示一个简单的实现示例。 1 效果调整浏览器窗口大小，你会发现视口的宽度和高度会实时更新（旧浏览器可能不支持）。...2.1 计算视口尺寸我们可以使用 vw 和 vh 获取浏览器视口尺寸，但是这是相对单位，所以需要转换为 px 才行。

1861 0

使用commons-imaging 获取图片的尺寸

导入依赖包以gradle 导入为例，maven类似 implementation ('org.apache.commons:commons-imaging:1.0.0-alpha5')2、计算图片实际尺寸...//1、通过MultipartFile file 获取ImageInfo ImageInfo imageInfo = Imaging.getImageInfo(file.getBytes()); //...2、获取DPI BigDecimal widthDpiBD = new BigDecimal(imageInfo.getPhysicalWidthDpi()); if(widthDpiBD.compareTo...; } BigDecimal widthBD = new BigDecimal(imageInfo.getWidth()); //3、获取英寸 BigDecimal widthInches...imageInfo.getHeight()); BigDecimal heightInches = heightBD.divide(heightDpiBD, 2, RoundingMode.HALF_UP); // 4、将物理尺寸转换为毫米

681 0

android 获取设备信息

null) { return ""; } return tm.getNetworkOperator(); } //android 获取当前手机型号...Context context) { Build bd = new Build(); return bd.PRODUCT; } //android 获取屏幕分辩率...dm.heightPixels; int w = dm.widthPixels; return h+ "*" +w; } //android获取当前时区...String s = tz.getID(); System.out.println(s); return s; } //android获取当前日期时间...String str = formatter.format(curDate); return str; } //获取手机系统语言

1.5K3 0

【编程基础】Android中如何获取资源的尺寸？

在Android中为了实现不同屏幕的适配，经常会用到在不同dimen.xml文件中对于同一dimen ID定义不同的大小，然后在代码中通过getDimension函数来获取，下面就来说说几种getDimension...getDimension()是基于当前DisplayMetrics进行转换，获取指定资源id对应的尺寸。文档里并没说这里返回的就是像素，要注意这个函数的返回值是float，像素肯定是int。...由此可见，这三个函数返回的都是绝对尺寸，而不是相对尺寸（dp\sp等）。...getDimension和getDimensionPixelOffset的功能类似，都是获取某个dimen的值，但是如果单位是dp或sp，则需要将其乘以density，如果是px，则不乘，并且getDimension

2.5K7 0

整理获取 viewport 和 element 尺寸和位置方法

整理获取 viewport 和 element 尺寸和位置方法 ⭐️ 更多前端技术和知识点，搜索订阅号 JS 菌订阅视口页面或窗口的位置和宽高获取视口宽高下面方法是包括滚动条的宽高，不支持 IE8...window.innerWidth window.innerHeight width + padding + border + 滚动条另外 outerWidth 浏览器兼容差，可获取包括工具栏的宽高...元素占用的空间尺寸和位置 getBoundingClientRect 使用方法 getBoundingClientRect() 返回的值见下图： ?.../border-top-width 的值，就是边框的宽度 offsetWidth/offsetHeight 同样可以使用 offsetWidth/offsetHeight 来获取元素包括滚动条和边框的尺寸...= null) { x += e.offsetLeft; y += e.offsetTop; e = e.offsetParent; // 获取最近的祖先定位元素

1.3K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭