I have the following and I want it to switch what stylesheet is used, but the last stylesheet defined is being used, the media query is not working.
Do I need to do something in addition to what I am doing?
<!-- iPhone -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 320px)"
href="/frontend/stylesheets/iPhone.css"/>
<!-- samsung -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)"
href="/frontend/stylesheets/samsung.css"/>
<!-- iPad -->
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 768px)"
href="/frontend/stylesheets/iPad.css"/>
Because of CSS Specificity and because your iPad media query is actually always going to be true (since the screen width on mobiles is always less than 768px). So it will override the rules/selectors you have in your other stylesheets.
You can try reordering you stylesheets the other way around (ie iPad lists first), but i would recommend you specify more explicit media queries to achieve what you want. Have a look at adding a min-device-width clause to your querys.
You can see an advanced example here:
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
Related
I haven't had a lot of exposure to CSS media queries; I'm basically learning via experimentation. I am trying to optimize my website to look good on all devices. I want it to use a specific CSS file if the browser width is large (desktop device, including Retina displays), a different CSS file if it is a tablet (iPad or other, including Retina), and a different CSS file for small screens (iPhone or other, including Retina). My current setup is included below, and results from them.
<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone -->
This works great on desktop computers, but the Retina display MacBook Pro uses the Phone CSS file rather than the Desktop one. The iPad displays the tablet optimized version great, but the Retina display iPad uses the Phone optimized CSS file. An iPhone displays the page great using the Phone CSS file, and the Retina display iPhone displays it great as well. I do not know how my site looks on other devices, since I only have Apple devices available to test with.
So, my CSS links are obviously set up incorrectly. How can I correctly set this up? I don't want to target any specific devices, aside from Retina displays. A Windows tablet should use the tablet CSS file, not just the iPad. Can this be done with 3 CSS links and 3 files, one for desktop (greater than 1024 px?), one for tablet (less than 1024 pixels), and one for phones (less than 640 px)? Or must I do those links, then additionally create a link for each Retina device, the rMBP, iPad, and iPhone? Or even create more than 3 CSS files?
You don't need to detect Retina displays, just detect device-width:
<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone -->
For web performance reasons, all of this can be done with a single CSS file, with #media (...) { selector1 { property: value; } } at-media blocks of rules instead of conditional loading of 1 to 3 files.
The problem with your original CSS links is that you have two conditions (with the comma signifying alternation) but you don't offer any width condition on the second-
<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px), screen and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px), screen and (max-device-width: 640px) and (-webkit-min-device-pixel-ratio: 2)" href="stylesheets/phone.css" /> <!-- Phone -->
The original link in psuedo code could be written-
"screen with maximum width of 1024px OR screen with a minimum device pixel ratio of 2"
This is why the retina MacBook was loading phone and tablet styles.
Of course, since you're not loading a specific/different stylesheet for the higher pixel density case, your original links could be written as-
<link rel="stylesheet" type="text/css" href="stylesheets/prevhome.css" /> <!--Desktop -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width : 1024px)" href="stylesheets/tablet.css" /> <!-- Tablet -->
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 640px)" href="stylesheets/phone.css" /> <!-- Phone -->
This is functionally equivalent.
I'm trying to use a couple stylesheets based on window size (phone or just very small desktop browser window). This works on neither. That is, I only see the style from 1024+.css Can someone help me out?
<!-- small display -->
<link rel="stylesheet" type="text/css" media="only screen and (max-width: 480px), only screen and (max-device-width: 480px)" href="resources/styles/small_device.css" />
<!-- widescreen -->
<link rel="stylesheet" type="text/css" href="resources/styles/1024+.css" />
Thank you
You code works as intended - it loads the first stylesheet on small screens and always loads the 1024+.css so the rules in the first stylesheet get overwritten every time.
Add a media query restriction for the larger screens as well
So I'm using an #media query to use a different css file on the mobile version of my site. Here's the head of my html:
<link rel="stylesheet" type="text/css" media="screen,projection" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" />
<link media="only screen and (max-device-width: 800px)" href="mobile.css" type="text/css" rel="stylesheet" />
However, I'm finding that the mobile css just 'adds' to the desktop css, rather than having the desired effect of only loading the css rules in mobile.css. For example, having a single rule about the background color being red in mobile.css, won't just give me some unformatted web content with a red background, but will render the desktop css with a red background.
I want to completely start from scratch building up a nice, functional view of the site on mobiles with a blank css file, but I don't want to have to manually undo the many tweaks I've done to make the site nice for desktop. In particular, I'd like to be able to eliminate the chance of some stray desktop css preventing the site from rendering with the correct proportions on mobile.
Any thoughts?
<link media="only screen and (min-device-width: 0px) and (max-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />
<link media="only screen and (min-device-width: 801px) and (max-width:9999px)" href="<?php bloginfo('stylesheet_url'); ?>" title="Simplr" type="text/css" rel="stylesheet" />
Wrap your desktop css in a media query that targets desktops
Use your media queries in a conditional fashion like this:
#media screen and (max-width: 800px) {
<link to mobile stylesheet
}
#media screean and (min-width: 801px) {
<link to full stylesheet
}
Note that all platforms will use "#media screen", so you cannot do reliable device detection with the media type alone. Most commonly you will use the device-width to help you make educated guesses at what type of device the client will be.
Devices with high DPI are usually pretending they are smaller, so both the iPhone 3GS and the iPhone 4 (for example) can be matched with the same set of queries.
Whether you link "only screen and (max-device-width: 800px)" or build into your css " #media #..."
You need to envelope the "desktop" styles in order for the mobile to not recognize them at all.
so basically
only screen and (max-device-width: 800px) - for your mobile devices
and
only screen and (min-width: 801px) - for desktops
If you're putting your mobile stuff last, then you could add a CSS reset to the top of your mobile stylesheet.
I'm working on making my current design responsive. I started out using #media screen... but nothing in the design would change. I attempted using the html, div, p, a, li, td { -webkit-text-size-adjust: none; } to see if that would at least help the fonts change sizes (I'm using em), but nothing changed.
Then I switched to <link type="text/css".... I currently have 3 media query files linked in my HTML document and I'm using HTML5/CSS3.
My question is: Why is the document only referencing the first file? I took out the core stylesheet and am using nothing but directly targeted sheets to see if that would stop it from just using the first stylesheet, but it hasn't. The fonts haven't resized. The containers won't resize. The images won't resize or remove. Only the first stylesheet is referenced - the others are ignored.
These are my current linked stylesheets:
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 800px)" href="scripts/css/style800.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 1024px)" href="scripts/css/style1024.css" />
Edit: The stylesheet does change from one to the other, but the styles themselves don't change. It's like 1280 stylesheet is overridding all the others with its styles.
Maybe you're looking for max-width instead of max-device-width?
Former is for display area like the browser for example and the latter is the actual device area.
Also, you want to put the smallest one (800px in your case) at the end.
try this:
<link rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="scripts/css/style.css" />
<link rel="stylesheet" media="only screen and (max-width: 1024px)" href="scripts/css/style1024.css" />
<link rel="stylesheet" media="only screen and (max-width: 800px)" href="scripts/css/style800.css" />
How do you debug them?
Try resizing the browser, these should work.
Also, I really dont suggest to use 800px, as iPad will also fall in it, you are better of using 767.
Currently for a Web Application I have the structure of using a
layout.css
layout_medium.css for tablet devices
layout_narrow.css for phone devices
Test A:
<link type="text/css" rel="stylesheet" href="/project/assets/css/layout.css" />
<link type="text/css" rel="stylesheet" href="/project/assets/css/layout_medium.css" media="only screen and (min-width: 481px) and (max-width: 999px)" />
<link type="text/css" rel="stylesheet" href="/project/assets/css/layout_narrow.css media="only screen and (max-width: 480px)" />
Test B
on layout.css I include the parts for
#import url('layout_medium.css') screen and (min-width: 481px) and (max-width:999px);
#import url('layout_narrow.css') screen and (max-width:480px);
Test B works on desktop for chrome and firefox but not on phones
Test A will always work, but then it clutters up my html head area which seems more dirty to me.
So the question is:
What is the Technical reason that Test B won't work on phones?
I think the best background is this very good quirksmode article series that explains viewports on mobile on how they're different than desktop. Read carefully!