iPad vs. iPhone - Adjusting CSS / HTML?

Question

** EDIT **

This is the code I'm using to detect whether it's a mobile device:

<!-- Javascript inclusion -->
<script type="text/javascript">
var isCE = navigator.appVersion.indexOf("Windows CE")>0;if (isCE){ window.location.href="http://m.mobileversionsample.com/";}
</script>
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
jQuery.preloadImages = function()
{
for(var i = 0; i<arguments.length; i++)
{
jQuery("<img>").attr("src", arguments[i]);
}
}
</script>

Went to the Apple store and saw that my mobile site picks up on an iPad as well... Does anyone know how to make an exception for iPads, so that they load the normal site and not the mobile version?

Answer 1

That would depend a lot on the code you're using to detect mobile browsers. You're presumably using the User-Agent string to detect something like "MobileSafari" - just add a conditional that skips the redirect if "MobileSafari" AND "iPad" are in the User-Agent string.

Answer 2

<link rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="../ipad.css" type="text/css" />

About supporting both landscape and portrait mode: http://www.cloudfour.com/ipad-css/

Detecting iPad using Javascript: http://davidwalsh.name/detect-ipad

var isiPad = navigator.userAgent.match(/iPad/i) != null; 

if(isiPad) { window.location.href="http://m.mobileversionsample.com/";}