首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

设备的屏幕像素

设备的屏幕像素屏幕像素比(Device Pixel Ratio ,DPR),实际上指的是window.devicePixelRatio ,被所有webkit浏览器以及opera所支持, 它是一个比值...其实就是用物理设备的像素/css像素。 举例来说:假如一个手机的像素是640x960而css像素为320x480,那么它的屏幕像素比为2。...在浏览器中的Console中可以查看当前网页的屏幕像素比。 在Console中输入window.devicePixelRatio即可查 那么屏幕像素比的含义是什么呢?...下面来简单分析一下 例如在retina屏幕中(视网膜显示屏,一种新型高分辨率的显示标准),DPR=2,意味着1个css像素用2x2个物理设备像素来绘制。 为什么是2x2呢?...因为在x轴方向和y轴方向分别用两个物理像素绘制。 如下图: ? 那么屏幕像素比有什么意义呢? 他能使页面更细腻的显示在一个高清分辨率的屏幕当中。

1.6K20
您找到你想要的搜索结果了吗?
是的
没有找到

【Android 屏幕适配】屏幕适配基础概念 ② ( 像素 px 与 密度无关像素 dip | 像素 px 与 密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 )

文章目录 一、像素 px 与 密度无关像素 dip 二、像素 px 与 密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度...) 与 屏幕像素密度 ( DPI , Dots Per Inch ) 概念进行区别 ; 屏幕像素密度 的单位是 DPI , 是 Dots Per Inch 的缩写 , 也就是每 英寸 的 像素点 个数...; 二、像素 px 与 密度无关像素 dip 在不同屏幕像素密度 dpi 下的换算关系 ---- px 与 dip 的换算关系 : 屏幕像素密度 ( DPI , Dots Per Inch )...= 1 px ; 屏幕像素密度 ( DPI , Dots Per Inch ) 为 240 dpi 时 ( hdpi ) , 1 dip = 1.5 px ; 屏幕像素密度 ( DPI ,...; 160 dpi 是 像素识别 基准 , 在该 屏幕像素密度 dpi 下 , 1 px = 1 dip ; 不同屏幕像素密度下的像素比例 : \rm mdpi : hdpi : xhdpi :

2K20

【Android 屏幕适配】屏幕适配基础概念 ③ ( 屏幕像素密度 DPI 与素材大小关联 | 屏幕像素密度 DPI 与 屏幕密度限定符关联 )

文章目录 一、屏幕像素密度 DPI 与素材大小关联 二、屏幕像素密度 DPI 与 屏幕密度限定符 xhdpi 关联 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 一...、屏幕像素密度 DPI 与素材大小关联 ---- 屏幕像素密度 DPI 与素材大小关联 : 屏幕像素密度 ( DPI , Dots Per Inch ) 为 120 dpi 时 ( ldpi ) ,...对应屏幕分辨率 240 x 320 ( QVGA ) , 对应素材放在 素材放在 res/mmap-ldpi 目录下 ; 屏幕像素密度 ( DPI , Dots Per Inch ) 为 160...DPI 与 屏幕密度限定符 xhdpi 关联 ---- 不同屏幕像素密度下的像素比例 : \rm mdpi : hdpi : xhdpi : xxhdpi : xxxhdpi=2 : 3 : 4 :...就是屏幕密度限定符 ; 屏幕像素密度 DPI 与 屏幕密度限定符 关联 : ldpi : \rm 0 < dpi \leq 120 , 对应图标大小 36 \times 36 ; mdpi :

2.9K30

【Android 屏幕适配】屏幕适配基础概念 ① ( Android 与 iOS 屏幕宽高比种类 | 屏幕像素密度 DPI )

文章目录 一、Android 与 iOS 屏幕宽高比种类 二、屏幕像素密度 参考文档 : 设备兼容性概览 屏幕兼容性概览 支持不同的像素密度 声明受限屏幕支持 一、Android 与 iOS 屏幕宽高比种类..., 只需要适配有限的几种屏幕类型即可 ; 二、屏幕像素密度 ---- 屏幕像素密度 的单位是 DPI , 是 Dots Per Inch 的缩写 , 也就是每 英寸 的 像素点 个数 ; 屏幕尺寸...指的是 屏幕 斜对角的 英寸 长度 ; 假设屏幕尺寸为 6.5 寸 , 屏幕的宽高分辨率为 1080 \times 1920 , 计算该屏幕屏幕像素密度 ( DPI , Dots Per Inch...) ; ① 首先 使用勾股定理 计算屏幕 对角线 上的像素个数 : 对角线上的像素个数 = \sqrt{分辨率宽度 ^2 + 分辨率高度^2} = \sqrt{1080 ^2 + 1920^2} \approx...3253 ② 然后计算每英寸的像素个数 : DPI = \cfrac{对角线像素个数}{屏幕尺寸} = \cfrac{3253}{6.5} \approx 500

6.5K30

Android开发 屏幕适配之像素密度适配

屏幕方向(port 竖屏,land 横屏) 屏幕像素密度(ldpi,mdpi,hdpi,xhdpi,xxhdpi,xxxhdpi) 本文主要介绍屏幕像素密度适配相关知识。...的宽高设置为跟随内容即wrap_content,那么屏幕显示的ImageView的宽高分别是多少像素?...屏幕像素密度指单位长度屏幕显示的像素,即常说的dpi (dots per inch),每英寸点数。密度越高显示画面就越清晰。...官方建议采用与屏幕像素密度无关的单位dp来描述button等控件的宽高,dp与px(像素单位)的关系为 px = dp * (dpi /160),也就是说如果设备像素密度为320dpi,则1dp = 2px...测试机型: Samsung N719 (像素密度: 320 dpi 屏幕宽高:720×1280) Samsung I619 (像素密度: 160 dpi 屏幕宽高:320×480) 测试图片

1.3K10

第119天:移动端:CSS像素屏幕像素和视口的关系

2、visual viewport(视觉视口)和物理像素 visual viewport(视觉视口)物理屏幕的可视区域,屏幕显示器的物理像素,同样尺寸的屏幕像素密度大的设备,硬件像素会更多。...和 dip (设备逻辑像素) ideal viewport(理想视口)通常是我们说的屏幕分辨率。...dip (设备逻辑像素)跟设备的硬件像素无关的。一个 dip 在任意像素密度的设备屏幕上都占据相同的空间。...设备的逻辑像素宽度和物理像素宽度(像素分辨率)的关系满足如下公式: 逻辑像素宽度*倍率 = 物理像素宽度 而移动端手机屏幕通常不可以设置分辨率,一般都是设备厂家默认设置的固定值,换句话说 dip 的值就是...屏幕宽度:屏幕的逻辑像素的数量(视觉视口、可见视口、虚拟视口) 逻辑宽度:逻辑像素的数量 视觉宽度:横向长度 chrome 实验结论:桌面浏览器设置viewport无效,但可以手动缩放。

1.7K50

Android中的像素密度,屏幕密度,屏幕大小,分辨率,ldpi,mdpi,xhdpi,xxhdpi

通常的手机尺寸:4英寸,4.5英寸,4.0英寸,5.0英寸,5.2英寸,5.4英寸,5.99英寸,6.0英寸,6.2英寸等 2 屏幕分辨率 屏幕分辨率:分辨率是手机屏幕像素点总数,一般用屏幕宽的像素点数乘以屏幕高的像素点数...类似1080×1920表示屏幕宽度方向上有1080个像素屏幕高方向上有1920个像素。...3 像素密度 像素密度(dpi,dots per inch;或PPI,pixels per inch):每英寸上的像素点数,结合屏幕大小和屏幕分辨率如果5.0英寸的手机的屏幕分辨率为1280×720,那么像素密度为...屏幕密度: 像素密度上面已经讲过了,那么什么是屏幕密度呢? 屏幕密度不知道如何定义,其实屏幕密度就是像素密度的另外一种表示,是以160dpi=1.0为基准的。...android以像素密度160dpi为基准对屏幕进行划分,当像素密度为160dpi时屏幕密度为1.0,像素密度为120dpi时屏幕密度为0.75,像素密度为320dpi时屏幕密度为2.0.

4.3K41

android全面屏像素密度,手机屏幕分辨率、PPI像素密度科普知识大全「建议收藏」

手机屏幕分辨率、PPI像素密度科普知识大全 【PPi指数】是手机清晰度的重要决定因素,所谓的PPI即每英寸所拥有的像素数目。...现在市售的大屏幕手机普遍分辨率都只停留在854*480的水平,同样的分辨率,屏幕越大,像素点之间的距离越大,屏幕就越粗糙。所以大屏幕也不一定能带来良好的视觉感受。...ppi高于300则无法察觉 理论上讲超过300ppi才没有颗粒感,比如iPhone4,3.5寸960×640,330ppi,屏幕的清晰程度其实是分辨率和尺寸大小共同决定,用ppi指数衡量屏幕清晰程度更加准确...现在一目了然了吧,4.5英寸的1280*720屏幕清晰度最高。...其次是5英寸的1280*720的,然后是3.5英寸的960*540 智能手机屏幕尺寸和分辨率一览表 2.8英寸分辨率为640×480(VGA) 像素密度286PPI 3.2英寸分辨率为480×320

2.7K20

又一神器面世:像素级的浏览器屏幕共享工具!

在 RTC 2020 编程挑战赛春季赛中,像素级、低流量的屏幕共享工具「Syncit」获得了第二赛道的第一名。项目作者余彦臻同时还是拥有 6500+Star 的开源项目 rrweb 的作者。...于是他从浏览器入手,开发出了这款既关注隐私保护和易用性,又能不占用过多网络带宽的屏幕共享与远程控制工具「Syncit」。 Syncit 传递的数据是文本格式的快照和 op-log。...基本功能 远程屏幕共享 我们需要做到像素级同步、低延时、超低流量占用。实现思路是将 Web 视图的变化与交互行为转换为序列化的快照和 op-log,由本端传输至对端后重放。...隐私保护 为了保护隐私,在屏幕共享过程中,需要可以做到灵活遮挡一些内容。Syncit 所遮挡的是内容,而不是固定的位置。...作者、直播与源码 作者 GitHub @Yuyz0112: https://github.com/Yuyz0112 浏览器内的像素屏幕共享与远程控制 ?

1.7K10

屏幕边缘上有趣的 1 个像素,看不见、摸不到

---- 鼠标输入与触摸输入 一个有趣的问题,因为 1920×1080 分辨率的屏幕,其横向只有 1920 个像素,也就是说如果需要区分一个像素,那么只需要 1920 个数值就够了。...这意味着 X∈[0, 1919] 或者 X∈[1, 1920] 的取值范围就能表示横向的所有像素了。 那么实际上最左侧的点的输入数值是多少呢?最右侧的点的输入数值是多少呢?...有趣的 1 像素 发现上面实验中有趣的现象了吗?...明明只有 1920×1080 的屏幕分辨率,窗口明明只有 1920×1080 那么大,鼠标下收到正常范围内的输入坐标,而触摸下我们能收到超出我们窗口大小 1 像素的触摸事件!...防踩坑秘籍 林德熙小伙伴告诉我说可以特意把窗口的尺寸做大一个像素

16020

折叠屏开发指导系列①丨屏幕兼容性解读:如何支持不同屏幕的尺寸和像素密度

这让开发者在应用程序适配中面临着不小的挑战,比如说屏幕难以完美适配,导致的UI错位以及反应迟缓等体验性问题,本文将从app设计和开发过程中给出支持不同屏幕尺寸和像素密度建议指导,确保应用界面能够在各类屏幕上美观的呈现...支持不同屏幕尺寸,确保您的应用界面在不同的屏幕尺寸下可以全屏的显示。...Note:虽然安卓提供了申请受限屏幕能力,但强烈建议您为应用设计resizeable能力,因为一旦您声明了受限屏幕比例(最大或最小)这意味着,当您的app运行在一个屏幕比例超出了您声明的范围,您的应用程序在屏幕上将出现黑边等现象...应用界面正确、美观的布局和显示,包含如下: 1)确保您的布局能够根据屏幕适当地调整大小 2)根据屏幕配置提供合适的UI 布局 3)确保对正确的屏幕应用正确的布局 4)提供可正常缩放的位图 详细信息请参阅...开发者为每种屏幕配置优化用户体验,方法是为不同的屏幕尺寸添加专门的布局,并为常见的屏幕密度添加优化的位图图像。

1.3K40

像素相关概念:PPI、DPI、设备像素、独立像素

但是随着技术的发展,从 iPhone 4 开始,苹果公司将 iPhone 4 的分辨率提高了一倍,但是尺寸没有变化,这意味着大小相同的屏幕上,像素多了一倍(一个方向上,像素点其实是 4 倍),但是屏幕的尺寸没有变化...PPI 描述了一英寸数字屏幕上显示的正方形像素的数量(通常在 67-300 之间)。另一方面,DPI 是指打印文档中墨水物理点的数量的打印术语。...它们俩其实是差不多的,只是在使用的范围不一样,因为「点」这个还是比较抽象的,当使用电脑屏幕的时候,就是像素点;而当你打印或者印刷东西的时候,就是喷墨点。...最初采用该种屏幕的产品是 iPhone 4,其屏幕分辨率为 640 x 960(每英寸像素数为 326 ppi)。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。 ?...retin屏幕指在正常视线距离内,肉眼很难看到像素的的屏幕。脱离视线距离谈retina就是流氓,50寸的1080P电视,你50CM内看大果粒,50米外看就是retina屏幕

2.6K20

设备像素和CSS像素

设备像素和 CSS 像素设备像素又称为 物理像素, 是 "物理屏幕" 上真实存在的发光点,只有屏幕一经出厂就固定不会改变。.../ 设备像素 640 960:图片图片不同的逻辑像素在不同的物理物理屏幕显示的效果如下:图片也就是说 CSS 像素和设备像素在有的时候是不一样的,那么什么时候不一样?...在 PC 端,1个 CSS 像素往往都是对应着电脑屏幕的 1 个物理像素, 所以我们无需关心 PC 端的 CSS 像素和设备像素问题,在手机端,最开始其实 1 个 CSS 个像素也是对应着手机屏幕的 1...iPhone4 的屏幕尺寸却没有变化,但是像素点却多了一倍,这就导致了在 1 个CSS个像素等于 1 个物理像素的手机上, 我们设置1个CSS像素只会占用 1 个物理像素,而在1个CSS个像素不等于1个物理像素的手机上..., 我们设置1个CSS像素就会占用 2 个物理像素, 所以仔细观察你会发现同样是1像素但是在 retina 视网膜屏幕的手机上会粗一些。

17300
领券