获取当前屏幕的宽度和高度

 在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个:

widow.document.body.offsetWidth;
window.screen.availWidth;
window.screen.width;

一上图(PC端)为例,

A区域 表示的网页的区域(屏幕下面虚线地方表示的是网页可以滑动的区域):widow.document.body.offsetWidth*window.document.body.offsetHeight。

B区域 表示的是可用区域(有网上的叫做空白区域)也就是显示的屏幕 除掉上面的工具栏(浏览器的标签)和下面的工具栏(电脑的菜单)。注意的是滑动栏是属于可用区域的: window.screen.availWidth*window.screen.availHeight。

C区域 表示的是显示器的宽和高,也就是电脑的分辨率 :window.screen.Width*window.screen.Height。

所以window.screen.Width= window.screen.availWidth

假如是移动设备,由于没有显示滑动条, 所以window.screen.Width= window.screen.availWidth=widow.document.body.offsetWidth,至于高度的话含义和电脑端是一样的。

PS:若想是的页面中的某个元素(Canvas之类的)匹配移动设备的屏幕高宽,可以使用以下代码:


<think>好的,我现在需要帮助用户解决在iOS开发中获取屏幕高度宽度的问题。用户之前已经问过关于获取TabBar高度底部安全区域高度的问题,现在他们想进一步了解如何获取整个屏幕高度宽度。我需要参考用户提供的站内引用,但看起来这些引用主要涉及Web开发(如JavaScript、Vue.js)Android开发,可能与iOS原生开发关联不大。不过,我需要确保回答准确,并覆盖用户可能关心的点,比如不同设备的分辨率、横竖屏适配等。 首先,用户的问题是如何在iOS开发中获取屏幕高度宽度。根据我的知识,在iOS中,通常使用UIScreen类来获取屏幕的尺寸。主屏幕的bounds属性会返回一个CGRect,其中包含屏幕的尺寸信息。另外,用户可能需要区分物理像素逻辑点(points),因为iOS使用点作为布局的基本单位,而物理像素会根据设备的屏幕密度(如Retina显示屏)有所不同。例如,在iPhone 12 Pro Max上,屏幕的逻辑宽度是428 points,而物理像素可能是1284px,这需要考虑devicePixelRatio,但iOS开发中通常不需要直接处理物理像素,除非涉及到图像处理或OpenGL等底层操作。 接下来,我需要确认用户是否需要获取基于当前设备方向的屏幕尺寸,因为当设备旋转时,屏幕宽度高度会交换。例如,在竖屏模式下,宽度是较短的边,而在横屏模式下,宽度变为较的边。因此,在获取尺寸时,可能需要考虑当前的方向,或者使用UIScreen的接口来动态获取。 另外,用户可能关心安全区域的问题,比如在带有刘海屏的设备上,顶部的状态栏底部的Home Indicator会占用一部分空间,但用户的问题是关于整个屏幕高度宽度,而不是安全区域内的可用空间,所以这部分可能不需要涉及,但可以简要提及以区分。 然后,我需要检查用户提供的引用内容。引用[1]提到在iOS设备上screen.width获取的是物理像素,可能在高分辨率设备上不准确,但这是在Web开发中的情况。而iOS原生开发中使用的是UIScreen.main.bounds,返回的是以点为单位的值,已经自动处理了缩放比例,因此不需要担心devicePixelRatio的问题。这点需要明确告诉用户,避免混淆Web原生开发的差异。 引用[2][3]涉及JavaScriptVue.js获取屏幕宽度的问题,可能与iOS原生无关,但可以忽略。引用[4]讨论Android获取屏幕尺寸的问题,指出需要处理不同密度的情况,但iOS中已经通过点系统自动处理了这一点,开发者通常只需使用点值即可,无需手动调整。 用户的需求是获取屏幕高度宽度,所以需要提供Swift或Objective-C的代码示例。例如,在Swift中,可以通过UIScreen.main.bounds来获取,bounds.size.widthbounds.size.height分别表示宽度高度。此外,需要注意在设备旋转时,是否需要更新这些值,或者是否应该使用UIView的frame来获取当前视图的尺寸,这可能更准确,尤其是在多窗口或分屏模式下。 可能还需要区分全屏尺寸应用程序窗口的尺寸,因为如果应用支持多窗口或分屏,UIScreen的尺寸可能不等于当前窗口的尺寸。因此,建议用户使用UIWindow或UIView的bounds来获取当前窗口的实际可用尺寸,尤其是在多任务处理情况下。 此外,用户可能需要知道如何监听屏幕尺寸的变化,例如设备旋转时如何更新UI。可以通过通知中心注册UIDevice.orientationDidChangeNotification来触发布局更新。 总结回答的结构应该是: 1. 使用UIScreen.main.bounds获取屏幕尺寸,解释点像素的区别。 2. 获取当前窗口的尺寸,考虑多窗口情况。 3. 动态适配设备方向变化。 4. 注意事项,如全屏与应用窗口的区别,安全区域的问题(虽然用户没问,但可以简要提及)。 5. 提供代码示例,包括Swift可能的Objective-C。 6. 提及相关的问题或扩展点,比如监听旋转事件或处理多任务分屏。 需要确保回答清晰,覆盖不同情况,并指出常见的陷阱,比如在错误的生命周期方法中获取尺寸导致的值不准确(如在viewDidLoad中获取时,视图可能尚未布局完成,应使用viewDidLayoutSubviews)。 现在,将这些思考整理成结构化的回答,使用用户要求的格式,包括分点说明、代码示例相关问题。</think>在 iOS 开发中获取屏幕高度宽度的方法需结合设备物理尺寸与逻辑布局特性,以下是详细实现方案: --- ### **1. 获取屏幕的完整尺寸(物理屏幕边界)** 使用 `UIScreen.main.bounds` 获取以 **逻辑点(points)** 为单位的屏幕尺寸(已自动适配缩放比例): ```swift // 屏幕宽度 let screenWidth = UIScreen.main.bounds.width // 屏幕高度 let screenHeight = UIScreen.main.bounds.height ``` - **逻辑点 vs 物理像素**:iOS 使用点(points)作为布局单位,Retina 屏幕中 1 点可能对应 2x 或 3x 物理像素[^1]。例如: - iPhone 14 Pro Max 的逻辑尺寸为 430x932 点,物理像素为 1290x2796。 - 开发者无需手动处理 `devicePixelRatio`(与 Web 开发不同)[^1]。 --- ### **2. 获取当前窗口的可用尺寸** 若应用支持多窗口或分屏模式,需使用当前窗口的尺寸(而非物理屏幕): ```swift guard let window = UIApplication.shared.windows.first else { return } let windowWidth = window.bounds.width let windowHeight = window.bounds.height ``` --- ### **3. 动态适配设备方向** 通过监听方向变化更新布局: ```swift // 注册方向变化通知 NotificationCenter.default.addObserver( self, selector: #selector(updateLayout), name: UIDevice.orientationDidChangeNotification, object: nil ) // 处理方向变化 @objc func updateLayout() { let currentWidth = UIScreen.main.bounds.width let currentHeight = UIScreen.main.bounds.height print("旋转后尺寸:\(currentWidth)x\(currentHeight)") } ``` --- ### **4. 注意事项** | 场景 | 解决方案 | |-----------------------|--------------------------------------------------------------------------| | **视图未完成布局** | 在 `viewDidLayoutSubviews` 中获取尺寸,避免在 `viewDidLoad` 中取值不准确 | | **刘海屏设备** | 若需排除安全区域,使用 `safeAreaInsets`(如顶部状态栏占 44 点)[^2] | | **多任务分屏** | 使用窗口尺寸(`window.bounds`)而非屏幕尺寸 | --- ### **完整代码示例** ```swift class ViewController: UIViewController { override func viewDidLayoutSubviews() { super.viewDidLayoutSubviews() // 方式1:直接获取屏幕尺寸 let screenSize = UIScreen.main.bounds print("屏幕尺寸:\(screenSize.width)x\(screenSize.height)") // 方式2:获取当前窗口尺寸(推荐) if let window = UIApplication.shared.windows.first { let windowSize = window.bounds print("窗口尺寸:\(windowSize.width)x\(windowSize.height)") } } } ``` --- ### **扩展对比** | 方法 | 适用场景 | 特点 | |--------------------------|----------------------|----------------------------------------------------------------------| | `UIScreen.main.bounds` | 全屏模式 | 返回物理屏幕的逻辑点尺寸 | | `window.bounds` | 多窗口/分屏模式 | 返回当前窗口的实际可用区域 | | `UIView.frame` | 子视图布局 | 基于父视图坐标系,可能受安全区域影响 | --- ### **相关问题** 1. 如何判断当前设备是否为刘海屏? 2. iOS 分屏模式下如何动态调整布局? 3. 如何获取屏幕的物理像素分辨率?
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值