3

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?

John
  • 9,840
  • 26
  • 91
  • 137

4 Answers4

4

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

John
  • 49
  • 2
  • Don't know how this got 3 votes. The exact question relates to the media screen size not being the answer because that is NOT iPad specific, and messes up desktop viewing if the desktop or window size falls into the same media declaration. Matto had the correct answer for this specific question. – Suamere May 11 '15 at 20:00
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.

MattoTodd
  • 14,467
  • 16
  • 59
  • 76
0

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

Community
  • 1
  • 1
Glycerine
  • 7,157
  • 4
  • 39
  • 65
0

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.

Benjamin
  • 1,206
  • 1
  • 12
  • 23
  • I think this is possibly a good answer, not sure if .touch also works for Windows 8+ touch-based systems. My desktop is touch enabled. – Suamere May 11 '15 at 20:01
  • Definitely becoming less and less relevant as a solution as more devices are touch enabled. Not the solution needed, but it worked as duct tape a few times for me. – Benjamin Jun 03 '15 at 13:09