Safari 在打印时未触发最大宽度媒体查询答案

【问题标题】：Safari not triggering max-width media queries on printSafari 在打印时未触发最大宽度媒体查询
【发布时间】：2021-04-10 05:21:57
【问题描述】：

我得到了一个应该由用户以不同格式打印的页面。因此，我有几个断点，以使它看起来有点不同，具体取决于格式（A4、A5、横向等）

我注意到一个问题，尽管在 Safari 浏览器（版本 13、14）上按下打印时断点未触发（CMD + P）。带有@media print 的一个媒体被触发，但不是宽度的媒体。我注意到，如果你调整窗口大小然后按print，断点就会被激活。

有没有办法强制浏览器触发这些？强制用户在打印前调整窗口大小远非最佳。

我做了一个简单的repro。矩形应根据窗口宽度改变颜色。如果您调整窗口大小，您会注意到它。如果您打印页面，矩形的颜色将保持不变。

body {
            background: red;
        }

        .indicator {
            width: 100px;
            height: 100px;
            background: orange;
        }

        @media (max-width: 1200px) {
            .indicator {
                background: rebeccapurple;
            }
        }

        @media (max-width: 900px) {
            .indicator {
                background: lime;
            }
        }

        @media (max-width: 600px) {
            .indicator {
                background: teal;
            }
        }

        @media (max-width: 300px) {
            .indicator {
                background: black;
            }
        }

        @media print {
            body {
                background: green;
            }
        }

<html>

<head>
</head>

<body>
    <div class="indicator"></div>
    <ul id="list">
    </ul>


    <script>
        const list = document.getElementById('list');

        for (let i = 0; i <= 1000; i++) {
            const li = document.createElement('li');
            li.innerText = `list element ${i}`;
            list.append(li);
        }
    </script>
</body>

</html>

PS：它在 chrome 中运行良好。

【问题讨论】：

标签： css printing safari

【解决方案1】：

你能检查下面的代码吗？希望它对你有用。我们添加了 print @media 和 min-width。我们根据要求添加多个媒体查询。

请参考此链接： https://jsfiddle.net/yudizsolutions/yj5wf7ho/

body {
  background: red;
}

.indicator {
  width: 100px;
  height: 100px;
  background: orange;
}


@media (max-width: 900px) {
  .indicator {
      background: lime;
  }
}

@media (max-width: 600px) {
  .indicator {
      background: teal;
  }
}

@media (max-width: 300px) {
  .indicator {
      background: black;
  }
}

@media print {
  body {
      background: green;

  }

}

@media print and (min-width: 300px) {
  .indicator {
      background: lime;
  }
}

@media print and (min-width: 600px) {
  .indicator {
      background: teal;
  }
}

@media print and (min-width: 900px) {
  .indicator {
      background: black;
  }
}

<body>
    <div class="indicator"></div>
    <ul id="list">
    </ul>


    <script>
        const list = document.getElementById('list');

        for (let i = 0; i <= 1000; i++) {
            const li = document.createElement('li');
            li.innerText = `list element ${i}`;
            list.append(li);
        }
    </script>
</body>

【讨论】：