1

我正在建立一个网站，它将在 iPad 上使用。问题是，我需要有 2 个样式表：

一种用于用户以全屏模式（没有地址栏）查看，另一种用于网站在 Safari 中打开标准。

是否可以制作如下一行：

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {}

但是当它在全屏时不是吗？

4

2 回答 2

1

您提到的媒体查询根据屏幕宽度工作，即device screen dimensions (width)，不考虑其 Safari 还是全屏（如您所描述的没有地址栏）。希望这是有道理的。

我快速搜索了一下，找到了链接。希望能帮助到你。

于 2012-09-24T18:32:09.303 回答
1

在 iOS 5 中，您应该能够在没有菜单栏的情况下定位屏幕大小（完全占据18px），这样您就会知道它是全屏的，因为它应该更大，因为菜单栏不会在那里：

@media only screen and  (min-device-width: 672px) and (max-device-width: 1024px) and (orientation:portrait) {}

如果这行得通，我不是 100%，但我知道顶部的黑条占据了18px. 尺寸如下：

landscape:1024x672 
portrait: 768x928

更新

我发现了我们如何使用 jQuery 来做到这一点，它依赖于window.navigator.standalone

$(document).ready(function(){
  if (("standalone" in window.navigator) && !window.navigator.standalone) {
    $('head').append("<link href='fullscreen.css' type='text/css' rel='stylesheet' />")
  }
});

现在这假设移动 safari 支持window.navigator.standalone并且应该支持。试试看。

于 2012-09-24T18:38:38.000 回答