WTF: Should be Easy.
- Started
- Last post
- 16 Responses
- sisu
I'm roughing out the code for a web site and would like a seperate style sheet for iPad/iPod users.
This is what I'm using:
<link media="only screen and (max-device-width: 1024px)" rel="stylesheet" href="css/ipad.css" type= "text/css" />This seems pretty straightforward but for some reason my ipad specific styles are loading on my desktop too, even though the res is far above 1024. The only difference between the desktop and iPod/iPad experience is that the List Item navigation would disappear.
Link: http://sisuhome.com/new/cycle9/
You shouldn't see the nav, because the ipad css is loading as well, which removes it.
- NONEIS0
<link rel="stylesheet" media="all and (max-device-width: 480px)" href="iphone.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" href="ipad-portrait.css">
<link rel="stylesheet" media="all and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" href="ipad-landscape.css">
<link rel="stylesheet" media="all and (min-device-width: 1025px)" href="ipad-landscape.css">- Seems like there should be a simpler catch-all one-liner. Basically, just trying to create a clear division between desktop users and ipod/pad users.sisu
- sisu0
Just figured it out. DUH DUH DUH.
- sisu0
Actually, still having issues.
This is the CSS I'm calling which should simply remove the list-item nav when viewed on the iPad and iPod:
#nav_trigger { display:none; }
#nav { display:none; }
#navBottom { display:none; }And this is the call for the CSS:
<link media="only screen and (device-width: 1024px)" href="ipad.css" type= "text/css" rel="stylesheet" />For some reason the iPad-specific CSS isn't loading and the nav is showing on every device - ipad, ipod, desktop.
What am I doing wrong?
- acescence0
does it work if you put it all inline in one css doc rather than loading separate stylesheets?
- sisu0
Got this working, though iPad still flashes the nav (that is supposed to be hidden) as the page loads, then removes.
Any ideas on how to prevent?
- acescence0
again, for just 3 lines I would just put it in one css doc.
- acescence0
or only show the stuff for non ipad devices using min-device-width so you're not getting one style overriding another on the ipad
- sisu0
@Acescence Sounds like a good idea but I don't know how to check for/distinguish platform within the css.
Currently, in one the main CSS, the nav is styled in a specific way. In the other CSS, the nav is set to display: none. This isn't meant to be an ipad/pod specific site. I just want it to degrade gracefully on ipad/pod.
- acescence0
you do it the same way you're doing it now, but just inline..
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px){
#nav_trigger { display:none; }
}
@media only screen and (min-device-width: 1024px){
#nav_trigger { display:block; }
}- well the syntax is right at least, but i realize there may be an issue with min and max overlapping here...acescence
- sisu0
In the style.css document?
Does that mean anything following the second statement will apply only to devices sub 1024px?
- acescence0
yes, in the css doc.
min is smallest screen size the rule will apply to, so everything above 1024. but there may be an issue with one rule being max 1024 and the other being min 1024, hmm...
- sisu0
Ok. got this implemented but still getting a flash of the nav on page load on an iPad/iPod:
http://sisuhome.com/new/cycle9/BTW, ran across this article: http://thomasmaier.me/2010/03/ho…
.. that says "The ipad.css will be interpreted by the iPhone, too" ... so no need to account specifically for iPhone too in this case.
- sisu0
Do you think the .JS associated with the nav is forcing it to show momentarily?
- sisu0
Twas easier, and just as hacky, to just do this:
@media only screen and (max-device-width: 1024px){
#nav_trigger { margin:-3000px; }
}