Question

当我的网站在移动设备或平板电脑上显示时，我正在使用CSS代码缩小文本。问题是，即使我的笔记本电脑不是移动设备，它也会在我的笔记本电脑上缩小Google Chrome上的文字。任何帮助解决这个问题将不胜感激。这是我的代码：

@media screen (moz-max-device-pixel-ratio: 3.0),
    (-o-max-device-pixel-ratio: 3.0),
    (-webkit-max-device-pixel-ratio: 3.0),
    (max-device-pixel-ratio: 3.0), {
    .album {
        font-size: 5px;
    }
}

Answer 1

@media
only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (   min--moz-device-pixel-ratio: 3),
only screen and (     -o-min-device-pixel-ratio: 3/1),
only screen and (        min-device-pixel-ratio: 3),
only screen and (                min-resolution: 288dpi),
only screen and (                min-resolution: 3dppx) { 

  /* Retina-specific stuff here */
    .album {
      font-size:5px;
    }

}

**Min device pixel ratio**      =        **min resolution**

2                                        192dpi
1.25                                     120dpi
1.3                                      124.8dpi
1.5                                      144dpi


1dppx is equivalent to 96dpi

reference

CSS媒体屏幕

1 个答案: