How can I style something differently in iOS when in a web app opened from the home screen?

Question

I'm trying to style my PWA differently when it is opened from the iOS home screen. I have this in my <head> :

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

I thought I could use a media query inside a @supports query like this:

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

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

Unfortunately this does not seem to work. I'm using an iPhone 6s with iOS 13.1.3. Is there a different approach I should be using?

Answer 1

Using standalone instead of fullscreen works.

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

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

How can I style something differently in iOS when in a web app opened from the home screen?

Question

1 answers

solution1
0 2019-11-20 04:48:50

How can I style something differently in iOS when in a web app opened from the home screen?

Question

1 answers

solution1 0 2019-11-20 04:48:50

solution1
0 2019-11-20 04:48:50