Question

我很难在OSX El Capitan上的Safari 9.1中正确打印。

我有适当的媒体查询，它们应该在横向或纵向模式下以不同的方式呈现页面。在调整Safari本身的大小时，一切都按预期工作，但在打印对话框中更改纸张方向不符合媒体查询。

它在最新的Chrome，Firefox和IE中按预期工作。但不是在Safari中。我正在使用的代码是：

<!DOCTYPE html>
<html>
 <head>
 <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
 <style type="text/css" media="print, screen">
    .print-body, body, html {
        width: 100%;
        height: 100%;
        margin:0;
        padding:0;
    }
    @media (orientation: portrait) {
        .print-body {
            background-color: red;
        }
        .print-body:after {
            content: 'portrait';
            font-size: 30px;
            position:absolute;
            top:0;
            left:0;
        }
    }

    @media (orientation: landscape) {
        .print-body {
            background-color: blue;
        }
        .print-body:after {
            content: 'landscape';
            font-size: 30px;
            position:absolute;
            top:0;
            left:0;
        }
    }
  </style>
  <title>TEST</title>
 </head>
 <body onload="window.print()">
    <div class="print-body"></div>
 </body>
</html>

可在此处测试：https://output.jsbin.com/qukidul （来自this gist）

任何帮助或见解将不胜感激！提前谢谢。

其他观察：

如果你切换到纸张大小的“字母”，chrome也不会考虑媒体查询 - 为什么？

Javascript window.print（）对话框不尊重Safari 9.1 El Capitan中的Mediaqueries

其他观察：

0 个答案: