手机屏幕分辨率术语:逻辑分辨率和物理分辨率

手机屏幕分辨率术语:逻辑分辨率和物理分辨率

发布于: 2015 年 5 月 13 日 by admin

最近在25学堂的群里,发现有好几位小伙伴们在询问一些关于智能手机屏幕的分辨率尺寸的问题。我也想肯定大多数的从事移动开发的小伙伴们也不是特别清楚,到底啥是逻辑分辨率和物理分辨率。

今天25学堂的老谭从个人的角度和一些极客的观点中汇总出来,给大家扫盲一下。

众所周知,手机屏幕分辨率是手机的重要参数之一。

大家都知道移动端设备屏幕尺寸非常多,碎片化严重。尤其是Android,你会听到很多种分辨率:480×800, 480×854, 540×960, 720×1280, 1080×1920,而且还有传说中的2K屏、4K、5k等。近年来iPhone的碎片化也加剧了:640×960, 640×1136, 750×1334, 1242×2208。

今天重点跟大家普及下 ,什么是逻辑分辨率和物理分辨率

解释一:俗话说物理分辨率是硬件所支持的,逻辑分辨率是软件可以达到的。

我们先来看看ios客户端的尺寸分辨率表:

物理尺寸是指屏幕的实际大小。大的屏幕同时必须要配备高分辨率,也就是在这个尺寸下可以显示多少个像素,显示的像素越多,可以表现的余地自然越大。

解释二:如同上图所对应的英文单词一样。

640*960、640*1136等这些都是物理尺寸或是物理分辨率。

而下面的320*480、320*568等这些都是逻辑分辨率或是逻辑尺寸。

解释三:从另外的角度来说:分辨率就是屏幕上横、纵的总象素点数。

如果我们设计的时候用单位px,可以说是物理分辨率尺寸。

如果我们设计的时候用单位pt,可以说是逻辑分辨率尺寸。

下面拿iphone 6 plus详细分析:

1、iPhone 6 Plus 的逻辑point分辨率用 360×640,也不是不可以,也即上面图表中的 iPhone 6+ (b)方案,那么 scale 用 @3x,最终像素分辨率 360×[email protected] 正好是 1080×1920,完美1:1映射,无需缩放;但缺点就是:iPhone 6 Plus的逻辑pt分辨率 360×640 就会比 iPhone 6的 375×667 还低,这天理不容啊,一个Plus的大屏幕虽然很精细,但是可显示的实际内容比 iPhone 6 还少。完全不符合 Bigger than bigger 。

打个比方就是:相同字号的情况下,iPhone 6如果一行显示了25个字,而 iPhone 6 Plus 按这个逻辑pt方案,一行就会只能显示24 个字了。

2、那如果逻辑point分辨率用 540×960 呢,也即图表中的 iPhone 6+ (c) , scale 沿用老的 @2x ,最终像素分辨率 540×[email protected] 不正好是 1080×1920 吗,也是完美1:1映射,无需缩放,还不需要多余做 @3x 素材; 而且这个方案的优点也很明显: pt 面积是 iPhone 6 的两倍 (540×960 = 375x667x 2),这样屏幕可显示的内容一下就增多了 ; 但这个方案的缺点就更明显了: 所有 iOS UI 元素尺寸在屏幕上的实际物理面积一下子就变小了,比如标签栏或导航栏按钮的物理高度只有原来的 81.5% ,

点击面积就只有iPhone 6的 0.815*0.815=66.4%,用户点击就困难了,总不至于苹果考虑触摸手指操作,为 <= iPhone 6 做一套设计规范,为 iPhone 6 Plus 再另外做一套设计规范。

时间: 2024-10-16 08:34:00

手机屏幕分辨率术语:逻辑分辨率和物理分辨率的相关文章

Android不同手机屏幕分辨率自适应【转】

有必要了解的 Android中常见的单位 dip, dp, px, sp之间的区别: dip: device independent pixels(设备独立像素). 不同设备有不同的显示效果,这个和设备硬件有关,一般我们为了支持WVGA.HVGA和QVGA 推荐使用这个,不依赖像素.px: pixels(像素). 不同设备显示效果相同,一般我们HVGA代表320x480像素,这个用的比较多.pt: point,是一个标准的长度单位,1pt=1/72英寸,用于印刷业,非常简单易用:sp: scal

移动端页面按手机屏幕分辨率自动缩放的js

<script>        var phoneWidth = parseInt(window.screen.width);        var phoneHeight = parseInt(window.screen.height);        var phoneScale = phoneWidth/750; //除以的值按手机的物理分辨率        var ua = navigator.userAgent;        if (/Android (\d+\.\d+)/.tes

New UI-获取手机屏幕尺寸与分辨率,屏幕适配,横竖屏问题

New UI-获取手机屏幕尺寸与常用分辨率,屏幕适配,横竖屏问题 --转载请注明出处:coder-pig,欢迎转载,请勿用于商业用途! 小猪Android开发交流群已建立,欢迎大家加入,无论是新手,菜鸟,大神都可以,小猪一个人的 力量毕竟是有限的,写出来的东西肯定会有很多纰漏不足,欢迎大家指出,集思广益,让小猪的博文 更加的详尽,帮到更多的人,O(∩_∩)O谢谢! 小猪Android开发交流群:小猪Android开发交流群群号:421858269 新Android UI实例大全目录:http:/

物理分辨率与逻辑分辨率,pt与px

有些小伙伴们,在使用chrome的移动端调试工具调试网页的时候,会发现iphone6上的尺寸为375*667,不禁差异,iphone的分辨率不是750*1334吗? 实际上调试器上的大小单位不是px,而是pt(point) 这就得说到物理分辨率与逻辑分辨率 物理分辨率:屏幕的实际大小,小伙伴们可以尝试一下对iphone6的大小进行测量,大小为375px*667px,请注意分辨率的概念有许多种,这是指长度单位px, 为了不与分辨率相混淆,单位设为pt(实际上用px作为分辨率的单位是不合适的,极容易

【物理分辨率】与【逻辑分辨率】

之前一直没搞清楚 win 10 DPI: 200%,到底是哪个坐标受到影响. 今天算是搞明白了. 与鼠标相关的,比如点击,移动操作使用的相关坐标依据的是[逻辑分辨率] 与屏幕取色.截图,找图相关的坐标,依据的是[物理分辨率] HWND hwnd_desktop = GetDesktopWindow(); HDC hdc = GetWindowDC(hwnd_desktop); //[物理分辨率]:显示屏的最佳分辨率 ( win 10 上[显示分辨率]中设置的分辨率 ) int w1 = GetD

webapp开发——‘手机屏幕分辨率’与‘浏览器分辨率’不要混淆

关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是”米3“,屏幕截图大小是1080宽,所以css样式用@media screen and(min-width:1080px){  …… },来判断屏幕最小宽度是1080px的手机web显示什么样的样式,结果却不能正常显示我所指定的css样式,最后在网上查了一下,发现分辨率的范围不对. css代码如下: @media screen and (min-width:1080px){ ...............

[HTML5]手机屏幕分辨率和浏览器分辨率

在使用CSS3的中有如下类似代码 Html代码 @media screen and (max-width:480px){ -- } 意思是在最大宽度为480px的设备上应用{}里面的样式.这里的width,注意是手机浏览器的分辨率,而不是手机设备的屏幕分辨率.比如苹果4的手机屏幕分辨率是960x640.而其自带的Safari浏览器的分辨率是320*480.我们可以通过如下代码检测所用的浏览器的分辨率: Js代码 $("#info").html("(您的浏览器的分辨率为:&qu

webapp开发——————手机屏幕分辨率和浏览器分辨率不要混淆

关于webApp响应式设计遇到的问题,分享给大家,最近在做一个手机webApp,因为我手机是"米3",屏幕截图大小是1080宽,所以css样式用@media screen and(min-width:1080px){  ...... },来判断屏幕最小宽度是1080px的手机web显示什么样的样式,结果却不能正常显示我所指定的css样式,最后在网上查了一下,发现分辨率的范围不对. css代码如下: @media screen and (min-width:1080px){ ......

手机屏幕的分辨率和图像尺寸关系

手机屏幕的分辨率 320*480 ,图像尺寸72*72,正常显示.在 240*320 的屏幕分辨率下,图像尺寸是多少(缩放比率是多少)才会正常显示(不失真,不模糊)? 一般比你手机屏幕大的都没事,但是怎么保持比例,像320*480比例就是0.66,你做的图片,保持这个比例就行! 320/480=0.66啊就是这么算啊,下次你做图片就按这个比例来就好了,就不会变形,走样了 http://segmentfault.com/q/1010000000425073 手机切图 http://www.mobi