CSS中的像素与像素密度

Question

我对HTML和CSS非常陌生,我刚想到,当决定某事物是5px时,由于像素的物理尺寸取决于密度,因此在100 ppi的屏幕上肯定5px看起来比在300的屏幕上看起来更大PPI.

这是正确的,如果有的话有没有办法调解这个？

Answer 1

绝对!通常在桌面上,1 css像素= 1像素.移动设备(特别是较新的高分辨率显示器)给我们带来了一些麻烦.这是我最喜欢的解决方法:

(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);
})();

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

请享用!