Search code examples
cssipadorientationstylesheet

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?

Solution

  • 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.