CSS - 像素密度独立设计，CSS像素在桌面上大50％ [英] CSS - pixel density independent design, CSS pixel 50% larger on desktop
问题描述
我在网上做了很多研究，但我仍然不确定如何处理我的网络应用程序中不同的屏幕密度。我发现这个网站上唯一有用的问题和答案是这样的：
尺寸差异是由设计决定的。移动设备通常更接近眼睛，由于屏幕尺寸较小，所以需要将更多空间挤入更小的空间。问题是，计算机可能会甚至不知道屏幕的大小，或者相同的图像可能会镜像到两个不同的屏幕上 - 例如笔记本电脑显示器和投影仪 - 其尺寸明显不同。最重要的是，大多数电脑和一些手机允许屏幕元素缩放，这也会影响网站上元素的大小。此外，无论如何，你不会希望图标在手机，巨型投影仪或50英寸电视上都是2厘米×2厘米。不过，即使你，无论出于何种原因想要，不幸的是，没有办法强制您的内容在所有设备上以完全相同的真实世界尺寸呈现。单位像 mm ， cm ， in ， pt 和 pc 会产生极其不一致的结果，不应该用于内容用于屏幕。
对于响应式网站，您应该使用< meta name =viewportcontent =width = device-width，initial-scale = 1/> metatag，如果你打算使用 px 我们bsite正确缩放。但是，这并不会使所有设备上的CSS像素大小完全相同，也不打算。浏览器在选择CSS像素尺寸时仅考虑设备尺寸和设备分辨率，不会尝试重新调整尺寸以适合手机上的桌面版网站。这是我个人喜欢的方法，并且可以找到我的跨平台网络应用程序，以便像各种设备上预期的那样进行扩展。
另一种使用前端提到的元标记将会使用 em 或 rem 可让页面上的元素与设备相关字体大小。虽然 em 和 rem 指的是当前的元素和根元素 font-sizes ，这些单位可以用于其他规则，如 width 和 padding 使它们按照供应商设置的字体大小进行缩放。这是有效的，因为不同的设备对于根元素将具有不同的默认字体大小（通常对于较大的像素密度来说较大的字体以提供大致一致的字体大小）。因此，使用 em 和 rem 会相应地缩放 - 当然，除非您在CSS中用绝对值覆盖它，当然。虽然 rem （ root 字体大小）更方便在某些情况下，请注意只有最新的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屋！
