我们可以使用屏幕分辨率而不是视口来应用 CSS 吗？

Posted 2023-02-19

【中文标题】我们可以使用屏幕分辨率而不是视口来应用 CSS 吗？

【英文标题】：Can we apply CSS using Screen Resolution instead of Viewport?

【发布时间】：2022-01-15 02:43:19

【问题描述】：

我想添加基于屏幕分辨率而不是视口的 CSS 样式。

情况如下： 我的屏幕分辨率是（1980 像素 x 1080 像素），如果我将 Windows 10 的“缩放和布局”设置为 125%，它会更改屏幕的视口并显示该视口样式。 我想根据屏幕分辨率而不是视口来展示我的媒体风格。

目前，我正在将这些媒体查询用于大分辨率：

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px)  ... 

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px)  ... 

我们可以只使用 CSS 而不是 JS 来实现这一点吗？

截图：

窗口 10 比例 100%：

100% 比例的视口：

Window 10 比例 125%：

125% 比例的视口：

【问题讨论】：

所以你还想在较小的视口上显示1920 样式？请记住，出于可访问性的原因，人们可能会扩大视口。

不知道是什么问题，屏幕大小和视口都一样，只是标签+地址栏+书签栏在降低高度

当您使用 windows Layout Scale 为“125%”时，它改变了视口，这是完全不同的事情。抱歉，我想在视口上也以 1920 像素的屏幕分辨率显示 1920px 样式。问题是当我们将 windows 10 布局比例更改为“125%”时，如果您使用 JS window.outerWidth 检查屏幕尺寸，它将显示您屏幕的实际分辨率。但如果你检查视口，它会完全不同。

@AbhishekPandey 实际上这不是真的。如果设备的像素和 css 的像素相等且大多数情况下它们不相等，则屏幕尺寸和视口可以相同。以 iPhone XR 为例，与 iPhone 4 相比，它每英寸的像素更多，因此与 iPhone 4 相比，它作为设备的像素将比 CSS 上的像素更多。我不确定我是否正在制作这里绝对有意义，但是您可以在网上找到很多关于此的文章。视口和屏幕分辨率是两个不同的东西，尽管有时它们可​​以根据设备的不同而相等。

【参考方案1】：

不幸的是，根本无法关闭当前的显示缩放设置并仅使用分辨率，因为它直接影响视口。但是，您可以使用以下媒体查询：

@media screen and (min-resolution: 125dpi) 
   /* Your code here */

这会影响以下元素：a) 当显示缩放设置为 125% 及以上，以及 b) 当浏览器中的缩放级别设置为 125% 或以上。

另一个好的做法是将max-width: 100%; 赋予您网站的html 和body 标记。这将防止各种元素达到将它们定位在可见视口之外的大小（当然，除非它们是绝对定位的）。

【参考方案2】：

为了区分缩放比例的变化，我们需要查看像素密度。 resolution 媒体功能可用于此目的：

/* used just for the demo*/
* 
  margin: 0;
  padding: 0;



/* your normal device specific media queries 
    @media (min-width: 1200px) 
      ...
    
    @media (min-width: 1400px) 
      ...
     */


/***********************/

.nonscaling 
  transform-origin: 0 0;
  background-color: wheat;
  width: fit-content;



/* scaling media queries */


/* 1. scale and layout setting at 100% */
@media (resolution: 1dppx) 
  .scale::after 
    content: '100%';
  



/* 2. scale and layout setting at 125% */
@media (resolution: 1.25dppx) 
  .scale::after 
    content: '125%';
  
  .nonscaling 
    /* offset the scaling */
    /* factor = 100/125 percent */
    transform: scale(0.80);
  



/* 3. scale and layout setting at 150% */
@media (resolution: 1.5dppx) 
  .scale::after 
    content: '150%';
  
  .nonscaling 
    transform: scale(0.6666);
  



/* 4. scale and layout setting at 175% */
@media (resolution: 1.75dppx) 
  .scale::after 
    content: '175%';
  
  .nonscaling 
    transform: scale(0.5714);
  

<div class="nonscaling">I will not scale! Period.</div>
<div class="scale">You've scaled: </div>

在 Windows 设置中，将 Scale and layout 设置更改为 100%、125%、150% 或 175%。并在此处查看效果。 在上面的 sn-p 中，我们使用dppx 单元，您可以使用other units。为了补偿缩放元素，我们使用transform: scale(..) 功能。您可以使用 zoom，但使用 Firfox doesn't support it。

注意：

您可以将 transform:scale(..) 应用于整个正文标签，以使用一条规则处理所有内容。另外，您可以尝试最小分辨率、最大分辨率和最小宽度、最大宽度的组合，例如 @media (min-width:1200px) and (resolution: 1dppx)。