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?

回答1:

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.

回答2:

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 */ }

回答3:

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

回答4:

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.