在从主屏幕打开的网络应用中，如何在iOS中设置不同的样式？

2024-05-21 • 问答

当我从iOS主屏幕上打开PWA时，我尝试使用不同的样式。我的<head>中有这个：

<meta name="apple-mobile-web-app-capable" content="yes">

我认为我可以在@supports查询中使用媒体查询，如下所示：

@supports (-webkit-overflow-scrolling: touch) {
  // default ios styles

  @media (display-mode: fullscreen) {
    // ios full screen styles (web app opened from home screen) 
  }
}

不幸的是，这似乎不起作用。我正在使用带有iOS 13.1.3的iPhone 6s。我应该使用其他方法吗？

ks_xpd 回答：在从主屏幕打开的网络应用中，如何在iOS中设置不同的样式？

使用standalone代替fullscreen是可行的。

@supports (-webkit-overflow-scrolling: touch) {
  // default ios styles

  @media (display-mode: standalone) {
    // ios web app styles (opened from home screen)
  }
}

css ios media-queries progressive-web-apps

本文链接：https://www.f2er.com/3068860.html

在从主屏幕打开的网络应用中，如何在iOS中设置不同的样式？

ks_xpd 回答：在从主屏幕打开的网络应用中，如何在iOS中设置不同的样式？

大家都在问