CSS - 像素密度独立设计，桌面上的 CSS 像素大 50% [英] CSS - pixel density independent design, CSS pixel 50% larger on desktop
问题描述
我在网络上做了很多研究，但我仍然不确定如何在我的网络应用中处理不同的屏幕密度.我在这个网站上找到的唯一有用的问题和答案是:
大小差异是设计使然.移动设备通常离眼睛更近，并且由于屏幕尺寸较小，因此需要将更多设备塞进较小的空间.
问题是，计算机甚至可能不知道屏幕的大小，或者同一个图像可能会被镜像到两个不同的屏幕上——比如你的笔记本电脑显示器和投影仪——它们的大小明显不同.最重要的是，大多数计算机和一些手机允许屏幕元素缩放，这也会影响您网站上元素的大小.此外，无论如何，您不希望手机和大型投影仪或 50 英寸电视上的图标都是 2 厘米 x 2 厘米.
但是，即使您出于某种原因想要这样做，不幸的是，也无法强制您的内容在所有设备上以完全相同的现实世界尺寸呈现.像 mm、cm、in、pt 和 pc 这样的单位会产生极大的不一致结果和不应用于面向屏幕的内容.
对于响应式网站，您应该使用 <meta name="viewport" content="width=device-width, initial-scale=1"/> 元标记，如果您是将使用 px 单位.这将确保网站正常缩放.但是，这不会使所有设备上的 CSS 像素大小完全相同，也不打算这样做.浏览器在选择 CSS 像素大小时只会考虑设备大小和设备分辨率，不会尝试重新缩放以适应手机上的桌面站点.这是我个人更喜欢的方法，我发现我的跨平台网络应用程序可以像预期的那样跨设备扩展.
使用上述 meta 标签 的另一种选择是使用 em 或 rem 使页面上的元素与设备字体大小相关.而 em 和 rem 指的是当前的 element 和 root element font-sizes分别地，这些单位可以用于其他规则，如 width 和 padding 以使其与供应商设置的字体大小相关.这是有效的，因为不同的设备将具有不同的根元素默认字体大小(通常较大的字体以获得较大的像素密度以提供大致一致的字体大小).因此，使用 em 和 rem 将相应地缩放 - 当然，除非您在 CSS 中用绝对值覆盖它.尽管 rem(root font size)在某些情况下更方便，但请注意 只有最新的 Internet Explorer 支持它.
自然是视口单位vw、vh、vmin 和 vmax 可以在创建缩放内容时提供很大帮助.但是，这些不会帮助您创建内容.
总而言之，如果我是你，我就不会那么关心在所有显示器上尝试使元素大小完全相同；这是一个徒劳的追求.您不仅不会成功，而且即使成功了，您网站的可用性也会受到影响.
I've done a lot of research on the web and I'm still not sure how to deal with different screen densities in my web app. The only useful question and answer on this site I've found is this: Getting the physical screen dimensions / dpi / pixel density in Chrome on Android
According to the highest rated answer, "50px should look roughly the same across all mobile devices it might vary a little, but the CSS Pixel is our device independent way to build consistent documents and UI's"
Is it really? Maybe for most mobile devices it's true, I tested my app on 2 mobiles, one with 144ppi and other 288ppi and it looked kinda the same. But on the desktop however, it is much larger. A CSS pixel is about 50% larger on desktop. This is a problem, because even when you have separate design for large and small screens, there are a lot of mobile devices which should be considered large screen, like a tablet in landscape mode. So let's say you design something for desktop, only to be disappointed that it looks 50% smaller on tablets.
It seems to me like something is not right with device pixel ratio. I used this site to test my screens: https://bjango.com/articles/min-device-pixel-ratio/ Laptop screen is 96dpi, -webkit-min-device-pixel-ratio=1.0 Smartphone is 144dpi and device pixel ratio is 1.5
So theoretically, according to this info the element should appear the same on mobile. 144/1.5=96 But it doesn't. It's like DPR is not working properly.
Update1: I've found this on MDN
The default ratio depends on the display density. On a display with density less than 200dpi, the ratio is 1.0. On displays with density between 200 and 300dpi, the ratio is 1.5. For displays with density over 300dpi, the ratio is the integer floor(density/150dpi). Note that the default ratio is true only when the viewport scale equals 1. Otherwise, the relationship between CSS pixels and device pixels depends on the current zoom level.
I don't know if it's still applicable to all devices, but in my example it seems it is. This is very bad. 50% difference is huge. I can't believe the web hasn't got anything better to offer. It is also weird that webkit-min-device-pixel-ratio shows 1.5, but in reality it is 1.0
Update2:
Ok so I'm starting a bounty. I just want some answers, best practices, other possible cases of CSS pixel disproportions, some links. Anything that could help me in this situation.
Let me state my specific problem again. I got a cross platform web app that is supposed to run on desktop, mobiles and tablets. Due to different pixel density, every element of the app appears about 50% larger on a 96dpi laptop screen than on a mobile device (144 dpi). One thing that really interest me is why even though that window.devicePixelRatio=1.5 for this device, browser treats it like it was 1.0 (otherwise it would look the same as on desktop).
I use one design for desktop and tablet, resolution doesn't matter really. My web app is standalone, so a desktop user can set the window width to like 800px. But things will be too large on desktop compared to a tablet. I will have to set different sizes to elements on tablet and desktop. One thing that comes to my mind is using media query, (min-device-pixel-ratio : 1.5) would set the style for mobile devices.
So I got a possible workaround, but I'd like to know more about CSS pixel inconsistencies. Is it the case just for mobile vs. desktop or are there more problems? It seems to me like it is more or less the same on mobile devices, but I can't test it. I'd like some discussion about the topic, other possible workarounds, best practices, some resources. I've searched and I couldn't find anything on the web. Everyone just says, "CSS pixel is our density independent pixel", but here is the truth:
The size difference is by design. Mobile devices are generally viewed closer to the eye and due to the smaller screen size, more needs to be crammed into a smaller space.
The problem is, that the computer may not even know the size of the screen, or the same image might be mirrored onto two different screens - like your laptop monitor and a projector - where the size is obviously different. On top of that, most computers and some mobile phones allow screen element scaling, which affects the size of the elements on your website as well. Besides, you wouldn't want an icon to be 2cm by 2cm on both a phone and a huge projector or a 50" television, anyway.
But even if you, for whatever reason, wanted to, unfortunately there's no way of forcing your content to be rendered with the exact same real world dimensions on all devices. Units like mm, cm, in, pt and pc will produce wildly inconsistent results and shouldn't be used for content intended for screens.
For responsive websites, you should use the <meta name="viewport" content="width=device-width, initial-scale=1"/> metatag, if you're going to use px units. This will ensure, that the website scales properly. This however, does not make the the CSS pixels exactly the same size on all devices and it doesn't intend to, either. The browser will merely take into account the device size and device resolution when choosing a CSS pixel size and won't try to rescale it to fit a desktop site on a mobile phone. This is the method I personally prefer and find my cross-platform web apps to scale like intended across devices.
Another option to using the fore-mentioned meta tag would be to use em or rem to have the elements on the page scale in relation to the device font size. While em and rem refer to the current element and root element font-sizes respectively, these units can be used on other rules like width and padding to make them scale in relation to the font-size set by the vendor. This works, because different devices will have a different default font size for the root element (generally larger font for larger pixel density to provide roughly consistent font-size). Thus, using em and rem will scale accordingly - unless you overwrite it in your CSS with an absolute value, of course. Though rem (the root font size) is more convenient in some scenarios, note that only the newest Internet Explorer supports it.
Naturally the viewport units vw, vh, vmin and vmax can be of great help when creating scaling content. These, however, won't help you create content.
In conclusion, if I were you, I wouldn't be so concerned with trying to make elements exactly the same size on all monitors; it's a quest in vain. Not only will you not succeed, but even if you did, the usability of your site would suffer.
这篇关于CSS - 像素密度独立设计，桌面上的 CSS 像素大 50%的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
