1

Is it possible to add a class to a webapp if it's been added to the homescreen, on an iPhone for example.

This is so I can show certain content in the homescreen version than on the website.

Would this have to be done using server side code or could it be done using jQuery?

user1658756
  • 1,014
  • 5
  • 13
  • 27

2 Answers2

0

You can do it detecting the device dimensions to determine whether is an small screen device or you can try to detect the kind of device which is accessing.

In order to detect the resolution of the device you can use Javascript (or jQuery) or even CSS 3 using the @media queries.

jQuery example:

var windowsWidtdh = $(window).width();
var windowsHeight = $(window).height();

CSS 3 media queries:

/* Hidden the mobile extra info for desktop computers */
#mobileInfo{
    display:none;
}

/*Showing the mobile info for screen resolutions smaller than 640px*/
@media only screen and (max-width: 640px) {
    #mobileInfo{
        display:block;
    }
}
Community
  • 1
  • 1
Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • But that would also apply to in the browser, right? I'm looking to add a class to the homescreen agent that an iOS device uses. – user1658756 Aug 27 '13 at 14:51
  • Then you should make use of device detections as pointed in [the link I posted](http://stackoverflow.com/questions/9982907/detect-mobile-devices-and-tablet-devices). – Alvaro Aug 27 '13 at 14:53
0

Modernizr adds a bunch of classes to the html of a document based on what features are available. I can't remember offhand if it will detect iOS (I suspect not) but it will tell you if you have a touchscreen to deal with.

TheOneTrueGod
  • 11
  • 4