Good evening,
I have a website with a current css optimized for a desktop experience. I am working on an Iphone css, using IwebKit5 to provide a better user experience on the go.
I was using javascript, parsing the user agent to detect which css to use. I was looking for a way to avoid use of javascript, and discovered the media queries feature.
<!--[if !IE]>-->
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="mobile.css"/>
<!--<![endif]-->
<link type="text/css" rel="stylesheet" href="desktop.css"/>
This is what I tried, it works well on desktop (the Iphone css is ignored), but on Iphone I realized that both mobile.css and desktop.css are loaded, so I am trying to find a way to avoid that. What is the option to add in order to avoid this behavior ?
Thanks !
I believe you're approaching this the wrong way.
Include desktop.css first, and let that be included unconditionally.
Then, inside mobile.css, add/override whatever properties you need to.
The vast majority of desktop.css should still be relevant on the iPhone - you should just be adjusting sizes/lengths and other such small tweaks on various elements inside mobile.css.