0

I am creating a website where I have created a fullscreen button, which can be kind of useful on mobile - at least for my website. This is done through some Javascript. However, if I'm not mistaken, this fullscreen mode does not work in Safari (or maybe just iOS in general). So basically, I would like to remove the button in those cases, since it doesn't work for them.

Can this be accomplished with CSS, or do I need some Javascript as well ?

Denver Dang
  • 2,433
  • 3
  • 38
  • 68
  • Cn you explain what 'fullscreen' does not work on Safari means in this situation? Perhaps you could show us the relevant code. – A Haworth Dec 01 '21 at 20:47
  • Also, take a peek at this: https://stackoverflow.com/questions/16348489/is-there-a-css-hack-for-safari-only-not-chrome – Kinglish Dec 01 '21 at 20:47
  • Does this answer your question? [Detect Safari browser](https://stackoverflow.com/questions/7944460/detect-safari-browser) – ControlAltDel Dec 01 '21 at 20:51
  • You should not be trying to detect Safari, rather use ["feature detection"](https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Cross_browser_testing/Feature_detection). @ControlAltDel `navigator.userAgent` has never been a reliable way of isolating a client. – Scott Marcus Dec 01 '21 at 20:51
  • @AHaworth, as far as I understand, you can't do full screen (at least mobile) on iOS devices. It works on any other mobile device, but not iOS. And there's not much to do about it, unless you want to do some trickery on the user end - which I don't think works at all from a users PoV. – Denver Dang Dec 01 '21 at 20:53
  • Yes I'm sure you are right and it doesn't work on Safari IOS, but according to https://caniuse.com/?search=fullscreen it doesn't work on several other mobile-OS/browsers too which is why I thought it might be useful to see your code to see how you were setting fullscreen. – A Haworth Dec 01 '21 at 21:29

1 Answers1

2

I think this is what you are looking for:

@supports (-webkit-touch-callout: none) {
  /* CSS specific to iOS devices */ 
}

@supports not (-webkit-touch-callout: none) {
  /* CSS for other than iOS devices */ 
}

CSS media query to target only iOS devices

tomaoq
  • 3,028
  • 2
  • 18
  • 25
Rikhil Shah
  • 58
  • 5
  • 10