Question

Trying to write html help files that get included with our app on iOS.

For the iPad version, I want the help files to display a smallish graphic (about
156×204).
For iPhone / iPod, I don’t want to have the graphic displayed.

Other than using javascript like the following in the file h_login.html:

if ((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
location.replace("h_small_login.html");

which requires a clone of each file, I haven’t found a method.

Would prefer to stay using minimal HTML … vanilla, no CSS, a single “meta” at the
start to specify:
meta name=”viewport” content=”width=device-width; initial-scale=1.5; maximum-scale=4.0; user-scalable=1;”

thanks!
Stan

Answer 1

By far the easiest way is with a media query. I’m fairly sure i-Devices support this feature of CSS:

@media screen and (max-device-width: 600px) {
   img.hide {display:none;}
}

Just add class="hide" to the relevant images, and adjust the 600px (I don’t know what the resolution of iPhone and iPad are, but just change the 600 to anything in between the two).

It is far easier to do this than to try and get JavaScript to do the same thing.