获取当前屏幕的宽高，屏幕比例

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

本文介绍了一种使用Dimensions API来获取屏幕宽度、高度及分辨率的方法。通过简单的JavaScript代码示例，展示了如何利用此API来适应不同设备的显示特性。 
var Dimensions = require('Dimensions');
var {width, height, scale} = Dimensions.get('window');




width-->屏幕宽度
heigh-->屏幕高度
sacle-->查看当前是几倍分辨率屏幕  2X、3X
react解决电脑分辨率及缩放导致页面变形的问题
u010234868的专栏
05-27 1152
如果使用了qiankun微服务，该应用是子应用，嵌入到主应用中时自适应效果不生效，可能是受到主应用中的配置影响，可以尝试在主应用中加入自适应方法查看效果，但是会影响主应用中页面模块的原有展示效果。另外，如果本身页面的字体已经很小，比如使用的11px、12px的字体大小，在电脑高分辨率的情况下，页面字体会显示的非常小，个人觉得用户体验不是很好。
安卓获取当前屏幕的屏幕尺寸（像素）
10-18
本文将详细讲解如何在安卓中获取当前屏幕的屏幕尺寸（像素），以便进行适配和图像设计。 首先，我们需要理解安卓系统中与屏幕尺寸相关的概念。屏幕尺寸通常包括屏幕宽度和高度，通常以像素为单位。安卓提供了`...
RN获取屏幕高宽、自适应(rem)设置
weixin_39065287的博客
04-01 2639
RN获取屏幕高宽、自适应(rem)设置 1、引入Dimensions 2、通过Dimensions.get(“window”).width/height; 获取屏幕高宽 pxToDp自适应js文件： import {Dimensions} from 'react-native'; // 获取竖屏模式的宽度 const deviceWidthDp = Dimensions.get('window').width; // UI 默认给图是750 const uiWidthPx = 750; //传入设计稿宽度
React Native中获取屏幕的宽高、分辨率
weixin_34252090的博客
07-18 894
开发App，避免不了要适配各个屏幕，为了精准的适配各个屏幕对应尺寸的设计，所以需要获取屏幕的宽高。有过iOS经验的小伙伴都知道在images.xcassets中会分为@2x和@3x图片，如下图所示：系统会根据手机类型，来选定图片的尺寸。但是在RN中，选定对应的图片设定在组件中后，如果不对组件设定宽高， 那么就会存在问题，RN中会根据图片的尺寸来生成对应大小的组件，故此处是一坑，需要处理。在RN中获...
笔记01-获取安卓手机屏幕的宽高
qq_34945904的博客
12-02 315
第一种： WindowManager wm = (WindowManager) getSystemService(Context.WINDOW_SERVICE); int width = wm.getDefaultDisplay().getWidth(); int height = wm.getDefaultDisplay().getHeight(); 第二种： WindowManag
react结合js获取屏幕鼠标滚动等距离实现页面懒加载
weixin_49720804的博客
03-14 1736
react结合js获取屏幕鼠标滚动等距离实现页面懒加载 JS获取屏幕分辨率 及 窗口尺寸的方法
JS获取当前网页大小以及屏幕分辨率等
10-25
在现代网页设计和开发过程中，获取当前网页大小以及屏幕分辨率是一项基础但非常重要的操作。使用JavaScript（JS）可以轻松实现这一功能，本文将详细介绍实现方法并解释相关概念。 首先，了解一些基本的HTML和CSS...
精选资源
Delphi 演示高分辨率下监控屏幕缩放系数变化，获取DPI等源程序及演示程序
05-19
1、获取显示其数量以及每个显示器的相关参数  2、判断当前显示器是否支持DPI感知 3、判断显示器是否支持触摸 4、设置显示器显示方向：横向、纵向、横向翻转，纵向翻转 5、感知监听显示器缩放系数变化 详细介绍参见...
C#获取屏幕与桌面分辨率宽高方法详解
本文将围绕标题“C#获取屏幕和桌面大小(宽、高)”以及描述“显示屏幕和桌面大小、显示屏幕和桌面宽高。用C#中的方法来获取屏幕大小和桌面大小。”展开详细的知识点讲解，并结合标签中的关键词如“C#”、“屏幕大小”...
Android获取屏幕宽高的三种方法详解
开发者需要准确获取当前设备的屏幕宽度和高度，以便进行UI布局调整、动态设置控件尺寸、实现响应式设计等操作。本文详细介绍了在Android应用中获取屏幕宽高的三种主流方法，涵盖了使用DisplayMetrics类、通过...
JavaScript方法获取屏幕缩放比例与分辨率
王继伟2021
07-15 1万+
JS（JavaScript）方法获取屏幕缩放比例与分辨率。
react网页适配不同分辨率_PC端页面适应不同的分辨率的方法 （转载）
weixin_39934296的博客
12-19 2271
上周完成一个PC端的项目，对于我这样的小白来说，这个项目里面最大的问题就是，如何做到让HTML页面适应电脑的不同分辨率。通过师傅的指导和自己查阅资料，最终成功适配不同的分辨率，完成了这个项目。现在回头再来看这个项目，突然发现适配不同的分辨率真的非常简单。这里总结两种方法，跟大家分享一下。希望可以帮助大家快速完成自己的项目。一.根据不同的分辨率，加载不同的CSS样式文件这个方法的思路是，分别针对80...
Weex入门教程之4，获取当前全局环境变量和配置信息(屏幕高度、宽度等)
NOT NULL
02-13 1万+
$getConfig()获取当前全局环境变量和配置信息。Returns: config (object): 配置对象； bundleUrl (string): bundle 的 url； debug (boolean): 是否是调试模式； env (object): 环境对象； weexVersion (string): Weex sdk 版本； appName (string): 应用名字； a
获取当前屏幕的宽度和高度
daisy_lisixi的博客
10-30 5749
在使用JS的时候经常遇到的问题就是我需要获取当前屏幕的宽度和高度。每每到这个时候不知道使用哪个：1 2 3 widow.document.body.offsetWidth; window.screen.availWidth; window.screen.width;一上图（PC端）为例，A区域 表示的网页的区域（屏幕下面虚线地方表示的是网页可以滑动的区域）：widow.document.b
获取屏幕和View宽度和高度的几种方式
chinajpr的博客
12-02 2109
用于获取屏幕的宽高和View的宽高
Weex手机平板屏幕高度的自适应
weianl的博客
05-31 3322
entry.js的相关填写 代码： //realHeight 是屏幕真正的高，750是设计页面时使用的高度为750px，自行修改 Vue.prototype.deviceWidth = weex.config.env.deviceWidth; Vue.prototype.deviceHeight = weex.config.env.deviceHeight; Vue.prototype.realH...
C++获取屏幕分辨率（屏幕窗口大小），屏幕显示比例（DPI）几种方法
热门推荐
yp18792574062的博客
03-08 1万+
获取屏幕的分辨率的几种方法 #include <Windows.h> #include <iostream> int main(void) { HWND hd = GetDesktopWindow(); // 方法一 RECT rect; // 只获得窗口客户区的大小 GetClientRect(hd, &rect); int client_wid...
C++ 获取屏幕显示比例
草上爬的博客
06-20 1万+
屏幕默认的显示比例是100%，但是有些用户喜欢调到“中等”或“较大”，这样的话，就可能导致我们开发的应用超出屏幕边界。因此，我们要获取屏幕显示比例，做出相应的处理。 Primary display DPI scale factor Similarly, you can get the pixel density by using the LOGPIXELSX and LOGPIXELSY
获取当前屏幕缩放比例 js
最新发布
07-26
在 JavaScript 中获取当前屏幕的缩放比例，可以利用浏览器提供的 `window.devicePixelRatio` 属性，该属性返回设备的像素密度，通常用于判断浏览器的缩放级别。该方法适用于现代浏览器，并且是获取屏幕缩放比例的首选方式 [^1]。 此外，为了兼容旧版浏览器（如 Internet Explorer）或某些特殊情况，可以结合其他方法进行判断，例如通过 `window.screen` 的 `deviceXDPI` 和 `logicalXDPI` 属性计算缩放比例，或者通过 `window.outerWidth` 与 `window.innerWidth` 的比值来估算缩放比例 [^2]。 以下是一个完整的函数实现，能够兼容多种浏览器环境并返回当前屏幕的缩放比例（以百分比形式表示）： ```javascript function getScalingRatio() { let ratio = 0; const screen = window.screen; const ua = navigator.userAgent.toLowerCase(); if (window.devicePixelRatio !== undefined) { ratio = window.devicePixelRatio; } else if (ua.indexOf('msie') !== -1) { if (screen.deviceXDPI && screen.logicalXDPI) { ratio = screen.deviceXDPI / screen.logicalXDPI; } } else if (window.outerWidth !== undefined && window.innerWidth !== undefined) { ratio = window.outerWidth / window.innerWidth; } if (ratio) { ratio = Math.round(ratio * 100); } return ratio; } console.log(`当前屏幕缩放比例为：${getScalingRatio()}%`); ``` 该函数首先尝试使用 `devicePixelRatio` 获取缩放比例，如果不可用，则根据浏览器类型和可用的屏幕属性选择替代方案。最终返回的是一个百分比数值，例如 125 表示 125% 的缩放比例 [^3]。 除了缩放比例之外，还可以结合 `window.screen.width` 和 `window.screen.height` 获取屏幕分辨率，并通过乘以缩放比例获得实际像素值。例如： ```javascript const scaling = getScalingRatio(); const realWidth = window.screen.width * scaling / 100; const realHeight = window.screen.height * scaling / 100; console.log(`真实屏幕宽度：${realWidth}px`); console.log(`真实屏幕高度：${realHeight}px`); ``` 此方法可用于适配高 DPI 显示器下的页面布局或图像渲染 [^4]。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值