CSS中的像素与像素密度 [英] Pixels in CSS vs pixel density

问题描述

对于HTML和CSS来说，我是一个非常新奇的人，我突然想到，当确定某像素为5像素时，由于像素的物理尺寸取决于密度，因此在100 ppi的屏幕上5像素肯定会比在像素上更大.屏幕为300 ppi.

I am incredibly new to HTML and CSS and it just occurred to me that when deciding something is 5px say, since a pixel's physical size is dependent on the density then surely 5px on a screen of 100 ppi would look bigger than on a screen of 300 ppi.

这是正确的吗?如果可以的话，有什么办法可以调解?

Is this correct and if so is there any way to mediate this?

推荐答案

绝对！通常在台式机上，1 css像素= 1像素.移动设备(尤其是带有更新的高分辨率显示器)使我们有些头疼.这是我最喜欢的解决方法:

Absolutely! Typically on a desktop, 1 css pixel = 1 pixel. Mobile devices (especially with newer high-res displays) have caused us some headaches. Here's my favourite workaround:

(function() {
    var meta = document.createElement("meta");
    meta.setAttribute('name','viewport');
    var content = 'initial-scale=';
    content += 1 / window.devicePixelRatio;
    content += ',user-scalable=no';
    meta.setAttribute('content', content);
    document.getElementsByTagName('head')[0].appendChild(meta);
})();

我通常将其添加为我的body标签的第一个孩子，但它可能应该在head标签中.该脚本根据显示器的像素密度修改设备的比例，并强制1个CSS像素等于1个像素.

I typically add this as the first child of my body tag, but it should probably be in the head tag. This script modifies a device's scale such based on the pixel density of the display and forces 1 CSS pixel to equal 1 pixel.

享受！

这篇关于CSS中的像素与像素密度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！