网站应用程序全屏而不是全屏的 CSS 样式表答案

【问题标题】：CSS stylesheet for website app fullscreen and not fullscreen网站应用程序全屏而不是全屏的 CSS 样式表
【发布时间】：2012-09-16 05:47:58
【问题描述】：

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

一个用于用户以全屏模式（不带地址栏）查看时，一个用于网站在 Safari 中打开标准时。

是否可以这样写一行：

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

但是当它在全屏时不是？

【问题讨论】：

全屏模式是指 Safari 在 iOS 6 中的新全屏模式，还是指当您的网站作为 Web 应用程序从 Web Clip 图标打开时？
不是新的全屏模式，而是另一种。当有人将其添加到主屏幕时
Opera 使用投影作为其“演示模式”，也许 Safari 紧随其后？ cssmediaqueries.com

标签： html css ipad safari media-queries

【解决方案1】：

你提到的媒体查询，根据屏幕宽度工作，即device screen dimensions (width)，不考虑它的Safari还是全屏（就像你描述的没有地址栏）。希望有意义。

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

【讨论】：

请问您，为什么您需要让它处理您在问题中提到的 2 个案例？仅仅让它适用于设备宽度就足够了吗？
我正在构建的设计在网站底部有一个缩略图部分。站点高度为2048px，但是当使用地址栏查看站点时，缩略图部分几乎消失了，但在主屏模式下完美。希望这是有道理的。
是的。不是ipad1024px的最大宽度（或高度），那为什么是2048px？
aaahhh 我的目标是水库，而不是宽度。谢谢 :) 我会看看是否有帮助

【解决方案2】：

在 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 并且应该支持。试试看吧。

【讨论】：

尝试了不同宽度的肖像，但没有成功。但据我所知，无论网站是否设置为主屏幕，设备宽度都不会改变。浏览器高度在视口中发生变化，但似乎也无法定位:(
是的，我也试过了，看来你是对的，我找到了另一个解决方案，请看我更新的答案。