Question

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

一个用户将在全屏模式下看到（没有地址栏），另一个用于站点在Safari中打开标准时。

是否可以制作如下行：

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

但是当它全屏反对时？

Answer 1

您提到的媒体查询，根据屏幕宽度工作，即device screen dimensions (width)，而不考虑其Safari或全屏（如您所描述的无地址栏）。希望它有意义。

我进行了快速搜索，找到了link。希望能帮助到你。

Answer 2

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

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

我不是百分之百，如果它可以工作，但我知道顶部的黑条占用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，它应该。试一试。

网页应用全屏而不是全屏的CSS样式表

2 个答案: