Search code examples
htmlcssipadsafarimedia-queries

CSS stylesheet for website app fullscreen and not fullscreen

I'm building a website, which will be used on an iPad. The problem is, that I need to have 2 stylesheets:

One for when the user will see in fullscreen mode (without the address bar) and one for when the site opens standard in Safari.

Is it possible to make a line like: 

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

but when it is in fullscreen contra not?

Solution

  • In iOS 5 you should be able to target the size of the screen without the menu bar (which takes up exactly 18px), this way you'll know it's fullscreen, because it should be larger since the menu bar won't be there:

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

    I'm not 100% if that'll work, but I know the black bar at the top takes up 18px. And the dimensions would be as such:

    landscape:1024x672 
portrait: 768x928

    Update

    I've found out how we can do this with jQuery, it relies on 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' />")
  }
});

    Now this assumes that mobile safari supports window.navigator.standalone and it should. Give it a try.