Question

我在不同的浏览器上测试我的代码。我看到Safari（Mac上的第9版）绝对忽略了方向肖像上的媒体查询。

这是一段代码：

@media print  and  (orientation:landscape) and (-webkit-min-device-pixel-ratio:0){
  // Hide the default headers and footers that the browser adds

  .no-print-portrait {
    display: block;
  }
  .portrait-notification {
    display:none;
  }
}

// If the orientation is in portrait it hides all html and displays a notification to the user to switch to landscape

@media print  and  (orientation:portrait) and (-webkit-min-device-pixel-ratio:0){

 // Hide the default headers and footers that the browser adds
  @page {
    margin: 0;
  }

  .no-print-portrait {
    display: none;
  }

  .portrait-notification {
    display: block !important;
    font-size: 24px;
    padding-left: 8px;
    padding-top: 20px;
    text-align: center;
  }
}

有人知道为什么吗？

非常感谢！

Answer 1

由于文档

，Safari不支持

http://caniuse.com/#search=print
and/or
https://developer.mozilla.org/en-US/docs/Web/CSS/@page

Safari忽略媒体查询肖像

1 个答案: