Css Safari打印时不触发最大宽度媒体查询

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

尽管在Safari浏览器（版本13、14）上我注意到一个问题，但按print（

CMD+p

）时不会触发断点。会触发带有

@介质打印的一种介质，但不会触发宽度介质。我注意到，如果您调整窗口大小，然后按
print
，断点将被激活

有没有办法强制浏览器触发这些事件？在打印前强制用户调整窗口大小远远不是最佳选择

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


正文{
背景：红色；
}
.指标{
宽度：100px；
高度：100px；
背景：橙色；
}
@介质（最大宽度：1200px）{
.指标{
背景：丽贝卡紫；
}
}
@介质（最大宽度：900px）{
.指标{
背景：石灰；
}
}
@介质（最大宽度：600px）{
.指标{
背景：水鸭；
}
}
@介质（最大宽度：300px）{
.指标{
背景：黑色；
}
}
@媒体印刷品{
身体{
背景：绿色；
}
}



const list=document.getElementById（'list'）；
对于（设i=0；i您能检查下面的代码吗？希望它能为您工作。我们已经添加了打印
@media
和
最小宽度
。我们根据我们的要求添加了多个媒体查询

请参阅此链接：


正文{
背景：红色；
}
.指标{
宽度：100px；
高度：100px；
背景：橙色；
}
@介质（最大宽度：900px）{
.指标{
背景：石灰；
}
}
@介质（最大宽度：600px）{
.指标{
背景：水鸭；
}
}
@介质（最大宽度：300px）{
.指标{
背景：黑色；
}
}
@媒体印刷品{
身体{
背景：绿色；
}
}
@介质打印和打印（最小宽度：300px）{
.指标{
背景：石灰；
}
}
@介质打印和打印（最小宽度：600px）{
.指标{
背景：水鸭；
}
}
@介质打印和打印（最小宽度：900px）{
.指标{
背景：黑色；
}
}



const list=document.getElementById（'list'）；
对于（设i=0；i您能检查下面的代码吗？希望它能为您工作。我们已经添加了打印
@media
和
最小宽度
。我们根据我们的要求添加了多个媒体查询

请参阅此链接：


正文{
背景：红色；
}
.指标{
宽度：100px；
高度：100px；
背景：橙色；
}
@介质（最大宽度：900px）{
.指标{
背景：石灰；
}
}
@介质（最大宽度：600px）{
.指标{
背景：水鸭；
}
}
@介质（最大宽度：300px）{
.指标{
背景：黑色；
}
}
@媒体印刷品{
身体{
背景：绿色；
}
}
@介质打印和打印（最小宽度：300px）{
.指标{
背景：石灰；
}
}
@介质打印和打印（最小宽度：600px）{
.指标{
背景：水鸭；
}
}
@介质打印和打印（最小宽度：900px）{
.指标{
背景：黑色；
}
}



const list=document.getElementById（'list'）；
for（设i=0；i