ios - iOS Web App 通话中媒体查询

Question

我正在开发一个 iOS 网络应用程序，但不知何故忘记考虑应用程序在更大的通话中标题栏的外观。我很难找到我应该用来处理这种情况的确切媒体查询，所以我想我会在这里概述它们。

Answer 1

事实证明，标题栏增加了 20 个像素。所以处理起来相当容易。以下是如果有人感兴趣的查询（假设您在应用程序中使用默认状态栏）：

<meta name="apple-mobile-web-app-status-bar-style" content="default" />

媒体查询：

/* iPhone 5 */
@media screen and (max-height: 548px) {}

/* iPhone 5 in-call */
@media screen and (max-height: 528px) {}

/* iPhone 4 */
@media screen and (max-height: 460px) {}

/* iPhone 4 in-call */
@media screen and (max-height: 440px) {}