CSS - 像素密度独立设计,桌面上的CSS像素大50%

Question

我在网上做了很多研究,我仍然不确定如何在我的网络应用程序中处理不同的屏幕密度.我发现这个网站上唯一有用的问题和答案是:在Android上获取Chrome中的物理屏幕尺寸/ dpi /像素密度

根据评价最高的答案,"50px应该在所有移动设备上看起来大致相同,它可能会有所不同,但CSS Pixel是我们独立于设备构建一致文档和UI的方式"

是真的吗？也许对于大多数移动设备来说,这是真的,我在2个手机上测试了我的应用程序,其中一个有144ppi和其他288ppi,它看起来有点相同.但是在桌面上,它要大得多.桌面上的CSS像素大约增加50%.这是一个问题,因为即使您对大屏幕和小屏幕进行单独设计,也有很多移动设备应该被视为大屏幕,例如横向模式的平板电脑.所以,假设您为桌面设计了一些东西,只是感到失望的是它在平板电脑上看起来要小50%.

在我看来,像设备像素比率的东西是不对的.我用这个网站来测试我的屏幕:https: //bjango.com/articles/min-device-pixel-ratio/笔记本电脑屏幕是96dpi,-webkit-min-device-pixel-ratio = 1.0智能手机是144dpi和设备像素比率为1.5

所以理论上,根据这个信息,元素应该在移动设备上显示相同.144/1.5 = 96但事实并非如此.就像DPR工作不正常一样.

Update1:我在MDN上发现了这个

默认比率取决于显示密度.在密度小于200dpi的显示器上,比率为1.0.在密度介于200和300dpi之间的显示器上,比率为1.5.对于密度超过300dpi的显示器,比率是整数层(密度/ 150dpi).请注意,仅当视口比例等于1时,默认比率才为真.否则,CSS像素和设备像素之间的关系取决于当前缩放级别.

我不知道它是否仍适用于所有设备,但在我的例子中它似乎是.这真是太糟了.50%的差异是巨大的.我无法相信网络没有更好的提供.webkit-min-device-pixel-ratio显示1.5也很奇怪,但实际上它是1.0

Update2:

好的,我正在开始赏金.我只想要一些答案,最佳实践,CSS像素不成比例的其他可能情况,一些链接.任何可以帮助我在这种情况下的东西.

让我再说一次我的具体问题.我有一个跨平台的网络应用程序,应该在桌面,手机和平板电脑上运行.由于像素密度不同,96dpi笔记本电脑屏幕上应用的每个元素都比移动设备(144 dpi)大约高50%.有一两件事,真正让我感兴趣就是为什么即使是window.devicePixelRatio = 1.5此设备,浏览器将它喜欢它为1.0(否则会看起来一样在桌面上).

我使用一种设计用于台式机和平板电脑,分辨率无关紧要.我的网络应用程序是独立的,因此桌面用户可以将窗口宽度设置为800px.但与平板电脑相比,台式机上的东西太大了.我将不得不在平板电脑和台式机上为元素设置不同的大小.我想到的一件事是使用媒体查询(min-device-pixel-ratio:1.5)将为移动设备设置样式.

所以我得到了一个可能的解决方法,但我想更多地了解CSS像素的不一致性.是仅仅针对移动设备还是桌面设备还是存在更多问题？在我看来,它在移动设备上或多或少相同,但我无法测试它.我想讨论一下这个主题,其他可能的解决方法,最佳实践,一些资源.我搜索过,我在网上找不到任何东西.每个人都说,"CSS像素是我们的密度无关像素",但这是事实:

Answer 1

尺寸差异是设计的.移动设备通常被视为更靠近眼睛,并且由于更小的屏幕尺寸,更多需要被塞入更小的空间.

问题是,计算机甚至可能不知道屏幕的大小,或者相同的图像可能会镜像到两个不同的屏幕上 - 如笔记本电脑显示器和投影仪 - 其大小明显不同.最重要的是,大多数计算机和一些手机都允许屏幕元素缩放,这也会影响网站上元素的大小.此外,无论如何,你不希望手机和巨大的投影仪或50英寸电视上的图标都是2厘米×2厘米.

但是,即使您出于某种原因想要,但遗憾的是,无法强制您的内容在所有设备上使用完全相同的真实世界维度进行渲染.单位,比如mm,cm,in,pt并pc会产生广泛不一致的结果和不应该被用于用于屏幕内容.

对于响应式网站,<meta name="viewport" content="width=device-width, initial-scale=1"/>如果要使用px单位,则应使用元标记.这将确保网站正确扩展.然而,这并没有使CSS像素在所有设备上完全相同,并且也不打算.在选择CSS像素大小时,浏览器将仅考虑设备大小和设备分辨率,并且不会尝试将其重新缩放以适合移动电话上的桌面站点.这是我个人喜欢的方法,我发现我的跨平台网络应用程序可以跨设备进行扩展.

使用前面提到的另一种选择meta tag是使用em或rem使页面上的元素与设备相关font size.虽然em并且分别rem引用当前element和root element font-sizes这些单元,但是这些单元可以用于其他规则,例如width,padding并使它们相对于供应商设置的字体大小进行缩放.这是有效的,因为不同的设备将具有不同的默认字体大小的根元素(通常较大的字体,较大的像素密度,以提供大致一致的字体大小).因此,使用em和rem将相应扩展-除非你有绝对的值覆盖在你的CSS,当然.虽然在某些情况下rem(root font size更方便),但请注意,只有最新的Internet Explorer支持它.

当然视台vw,vh,vmin和vmax可以创建缩放内容时有很大的帮助.但是,这些内容无法帮助您创建内容.

总而言之,如果我是你,我就不会那么担心在所有显示器上制作完全相同尺寸的元素; 这是徒劳的追求.您不仅不会成功,而且即使您这样做,您网站的可用性也会受到影响.