All geek questions in one place

Download css file for ipad only

I am trying to download 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 the iPad, but if I lower my resolution to 1024 by 768 on my desktop and browse the site in firefox, the ipad stylesheet will also load. 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 the same problem. How can I make sure that this style sheet ONLY loads if they are viewing a page on an iPad?

+3
source share
4 answers

What technology are you using? If you have control over what you are displaying (server side) on the page, you can check the USER-AGENT header in the request. If it contains an iPad string, then render the css tag; if not, do not enable it.

html, .

+1

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

.

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

/* iPad */ }

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

/* */ }

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

/* */ }

+4

- - .

http://www.modernizr.com/ , . Modernizr .touch . .touch, , , -, , .

0
source

Source: https://habr.com/ru/post/1789612/

More articles:


All Articles