Html 网站应用程序全屏和非全屏的CSS样式表

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

一个用于用户在全屏模式（不带地址栏）下查看，另一个用于站点在Safari中打开standard时

有没有可能画出这样一条线：

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

---

但是当它处于全屏状态时，不是吗？

您提到的媒体查询是根据屏幕宽度工作的，即

设备屏幕尺寸（宽度）

，而不考虑其Safari还是全屏（如u所述，不带地址栏）。希望它有意义

---

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

在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' />")
  }
});

$（文档）.ready（函数（）{
if（（“standalone”在window.navigator中）和&！window.navigator.standalone）{
$（'head'）。追加（“”）
}
});

---

现在假设mobile safari支持

window.navigator.standalone

，它应该支持。试一试。

全屏模式是指Safari在iOS 6中的新全屏模式，还是指当您的网站以web应用程序的形式从web剪辑图标打开时？不是新的全屏模式，而是另一种模式。当一些人将其添加到homescreenOpera的“展示模式”中时，也许Safari会跟随它？尝试了不同宽度的肖像，但没有运气。但据我所知，无论网站是否设置为主屏幕，设备宽度都不会改变。浏览器高度在视口中更改，但似乎也无法针对以下对象：（是的，我也试过了，似乎你是对的，我找到了另一个解决方案，请看我的最新答案。我可以问你，为什么你需要让它处理你在问题中提到的两种情况吗？仅仅让它在设备宽度上工作就足够了吗？我正在构建的设计在网站底部有一个缩略图部分。网站高度是2048px，但当使用地址栏查看站点时，缩略图几乎消失，但在主屏幕模式下非常完美。希望这有意义。是的。这不是ipad的最大宽度（或高度）

1024px

，那么为什么要使用2048px呢？啊，我的目标是分辨率，而不是宽度。Thx:）我看看这是否有帮助