Detect iPad

JavaScript
1

Hi all,

Just wondering how someone would go about detecting an iPad and serving up a few CSS styles to it?

My situation is:

I have 2 background images on a site that are fixed and have background-size set to cover and they don’t look good on an iPad. Also I have 4 boxes that have CSS rotate applied on hover - on an iPad this has a slightly different effect.

They are the 2 things I want to change, would it be better to do a detect and serve up different CSS or best just to use media queries - as I understand an iPad in landscape view is 1024px in width and my site is 1000px in width, so applying media queries would affect my site on desktops.

I have been directed over to this site - http://davidwalsh.name/detect-ipad - but I don’t really know how to add a CSS file once the iPad is detected.

Cheers,
Al.

2

What is that looks bad on the ipad exactly? Maybe there is something else that can be done (although I know mobiles don’t really like fixed elements). Usually it is better to find something that works for all than forking the code too much but of course sometimes there’s no choice.

Also I have 4 boxes that have CSS rotate applied on hover - on an iPad this has a slightly different effect.

The ipad doesn’t have hover (as such) but in some cases you could probably use touchstart and touchend for a similar effect (although this demo seems a little buggy at times):


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<script  type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
.hover {
	background:red;
	width:300px;
	height:300px;
	border:1px solid #000;
	line-height:300px;
	margin:100px auto;
	font-size:300%;
	text-align:center;
	-webkit-transition: all 1s ease-in-out;
	-moz-transition: all 1s ease-in-out;
	-o-transition: all 1s ease-in-out;
	-ms-transition: all 1s ease-in-out;
}
.hover:hover, .hover.over {
	background:blue;
	-webkit-transform: rotate(360deg);
	-moz-transform: rotate(360deg);
	-o-transform: rotate(360deg);
	-ms-transform: rotate(360deg);
	transform: rotate(360deg);
}
</style>
</head>

<body>
<p class="hover">Hello</p>
<script>
$(document).ready(function() {
    $('.hover').bind('touchstart touchend', function(e) {
        e.preventDefault();
        $(this).toggleClass('over');
    });
});
</script>
</body>
</html>

They are the 2 things I want to change, would it be better to do a detect and serve up different CSS or best just to use media queries - as I understand an iPad in landscape view is 1024px in width and my site is 1000px in width, so applying media queries would affect my site on desktops.

You could use device-width instead of width and the desktop won’t be affected.

I have been directed over to this site - http://davidwalsh.name/detect-ipad - but I don’t really know how to add a CSS file once the iPad is detected.

I assume you could use that routine and then add a class to the body tag so show that its an ipad and then you can use that class in the normal way in your css to style the ipad.

e.g.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
.test {
	background:red;
	width:800px;
	height:300px;
	border:1px solid #000;
	line-height:300px;
	margin:100px auto;
	font-size:200%;
	text-align:center;
}
.ipad .test { background:blue }
</style>
</head>

<body class="hello">
<div class="test">Red background but Blue in Ipad only</div>
<script type="text/javascript">
var isiPad = navigator.userAgent.match(/iPad/i) != null;
if (isiPad) {document.getElementsByTagName("body")[0].className+=" ipad";}
</script>
</body>
</html>
3

Thanks for the reply Paul.

The background images look like they are zoomed in a lot. The images sizes are about 1,000px × 650px and look good on desktop screens. I don’t have any screenshots at the moment as I don’t have an iPad handy, will be able to get one tomorrow.

If device width works that would be great!

This is the CSS for the first background image:

background: url(../img/bg/intro-background-02.jpg) no-repeat top center fixed;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;

For the rotate effect on iPad’s, the links (4 boxes) have a white border of 40px, when touched on the iPad, it seems for a second the border disappears. When the user clicks back in the browser, the link (box) is in the rotated position.

Thanks for your reply Paul, it’s a great help, I will try the device width first and see if that works.

I have seen a plugin for Firefox, something to the effect of pretentding to be an iPad, I’ll have a look and see if I can find it again - do you think this would be of any use?

4

If you have a mac you can download the developer sdk which has almost perfect iphone and ipad simulators built in. It’s a big download though. I’m not sure anything else is going to cut the mustard.

5

That sounds like a ‘retina’ issue, with the screen resolution on the iPad being much higher than usual. there are many imperfect solutions to that, but since you are using background-size, a nice solution is to save the image at twice the actual dimensions needed. To avoid a larger file, you can afford to save the image at a lower quality to compensate. That gets very nice results.

As for designing for the iPad, remember that this isn’t a very practical exercise. There are hundreds (if not thousands) of devices being used out there, and it’s totally impractical to try to chase them all down. Most people in the world are not using iPads. Despite all the talk about them, they are a niche item.

6

background-attachment fixed doesn’t work very well on the ipad (at least not on my ipad) but if you move the image to a fixed element instead and remove the background-attachment:fixed then I get the same results as a normal browser.

demo

Also try the method Ralph mentioned to improve image quality on retina displays.

For the rotate effect on iPad’s, the links (4 boxes) have a white border of 40px, when touched on the iPad, it seems for a second the border disappears. When the user clicks back in the browser, the link (box) is in the rotated position.

Try adding -webkit-backface-visibility: hidden; to the transform rules as webkit often needs it to smooth out the animation.

7

Great thanks for the reply guys.

Don’t have a Mac. I am back in work tomorrow, one of my colleagues has an iPad so will be able to check the results then. Thanks again.

I will get back with updates soon!

8

Sorry only getting back now - we had a lot of work to get done over the last week or so. We hope to launch the site either today or tomorrow, so I’ll be posting it in here too for some reviews.

Anyway back to the issue I was having. Originally the image was being displayed as a couple of times it’s size and looked like it was zoomed in a lot. I’ve taken both your comments on board.

I had used min and max device-width like you said Paul and changed the background-size from cover to auto. This was almost right, it wasn’t quite full width, so I changed auto to 100% auto and this solved that.

As for the rotation, I just disabled it for that device size and that sorted that.

I’ve tried it today and it looks like it’s working fine now.

Thanks so much for your help Paul and ralph. Keep an eye out for a new site posted in the feedback section over the next few hours!