CODEWITHSUNDEEP
cssipadorientationstylesheet
John
John

Reputation: 10146

Load css file for ipad only

Im trying to load a css file for ipad only. I tried this:

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

It works for iPad but if I lower my resolution to 1024 by 768 on my desktop and view the site in firefox the ipad stylesheet loads as well. So I tried:

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

But still same issue. How can I make sure this stylesheet ONLY loads if they are viewing the page on a iPad?

Upvotes: 3

Views: 21052

Answers (4)

Benjamin
Benjamin

Reputation: 1286

Due to many different screen sizes and resolutions I was not able to only use media queries for this issue.

I include http://www.modernizr.com/ in all of my projects already, so I was able to use a combination. Modernizr will add a class of .touch on touch enabled devices. I'd suggest trying to use .touch to determine that it's not a PC, then the media query to narrow down what mobile device it is.

Upvotes: 0

John
John

Reputation: 49

From: http://css-tricks.com/snippets/css/ipad-specific-css/

This works better for me.

@media only screen and (device-width: 768px) {

/* For general iPad layouts */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {

/* For portrait layouts only */ }

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {

/* For landscape layouts only */ }

Upvotes: 4

Glycerine
Glycerine

Reputation: 7347

This question might help:

Detect iPhone/iPad purely by css

And this:

http://techcline.com/2010/04/cross-browser-issues-detect-ipad-users-through-user-agent-script.html

Upvotes: 0

MattoTodd
MattoTodd

Reputation: 15209

What technology are you using? If you have control over what you are rendering (server side) to the page you can check for the USER-AGENT header in the request. If it contains the string iPad, then render out the css tag, if not, don't include it.

If you are just delivering static html, this will not work.

Upvotes: 1

Related Questions