100% iPad detection and redirection JavaScript

hum@no.id · Mon Jun 27, 2011 3:51 pm

Just subject
need 100% working, useful and simple JavaScript into HTML header place for iPad detection and redirection to compatible site version (like as index_ipad.html)

iPad1\2

Any help would be appreciated

Wim.Koornneef · Thu Jun 30, 2011 9:08 am

Hello Hum,

Take a peek in the html code and perhaps this is what you are looking for:

http://www.dmmdh.nl/panos/fanotec/fanot ... index.html

The default is Flash but the JS redirects to a version for iPad (tiles 960 px) and a version for iPhone (tiles 800-640-480px, size depending on the iPhone).

The JS is embedded in the html code of the Flash Index page and in all Flash pano pages, when you enter the Flash Index page with an iDevice you are automaticly served with the proper Index page and when you enter a Flash panorama page without using the Index you get the proper pano for your iDevice.

For the creation of the html pages I use customized html templates for the html generator.

Success,
Wim

hum@no.id · Thu Jun 30, 2011 12:18 pm

Thanks Wim...

... you have the opportunity to test directly iPad1 and v2?

Also compatible with the Declaration (?):

Code: Select all

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

*Maybe exist one duplicate unrequired "closing tag" - </script>. Your source:

Code: Select all

<html>
<head>
<script type="text/javascript">
if (navigator.userAgent.indexOf("iPad") != -1) {
document.location = "../htmlcss3/index.html";
}
</script>
<script type="text/javascript">
if ((navigator.userAgent.indexOf("iPhone") != -1) || (navigator.userAgent.indexOf("iPod") != -1)) {
document.location = "../htmlcss3_small/index.html";
}
</script>
</script>

Wim.Koornneef · Thu Jun 30, 2011 1:16 pm

Hello Hum,

For a couple of reasons my redirect is the same for iPad v1 and v2:
*) As far as I know there is no way to detect v1 from v2,
*) The screen resolution for v1 and v2 is the same so if there is a detect option for v2 (that I am not aware of) then a larger tile size would be only useful for v2 when zooming in the pano.

I don't use the "DOCTYPE" line on purpose, I noticed that when used the display of flash panos in several browsers (amongst them FireFox) is different and when I skip this line all browser are displaying the content the same.

I guess the redirect JS should work with and without the DOCTYPE line, you have to test this yourself.
About testing, when you register as Apple Developer (the free plan) you can download software (OSX only) that is needed to make iDevice and test apps and webpages with an iOS Simulator.

Thanks for reporting the redundent closing tag, it originally belonged to another redirect script for other mobile devices.
When I removed this script I obviously forgot to remove the closing tag, it is completely ignored by the web browser so that is the reason why I didn't noticed it myself

Wim