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.
Related
I am currently working on a new responsive website with several breakpoints. Between those breakpoints the layout should be flexible to always display as nice as possible on every device.
If a user views the page with a classic desktop browser i want to force the desktop version of the page and prevent the responsiveness.
Reason why is the lack of responsive ads which currently exist in germany.
Anyone has a clue for me how to achieve it?
You should use max-device-width rather than max-width, which targets the viewport size rather than the device screen size.
#media only screen and (min-device-width : 1024px) {
/* Styles */
}
You can also target retina displays:
#media only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
Edit: See this SO thread for more info.
Start by having two stylesheets. One responsive and one non-responsive. If it's a desktop user then load the non responsive and vise versa for mobile users
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
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
I was thinking the link target on the stylesheet would make my css file only load when it loads on a tablet or iphone. But the elements I'm trying to hide are still there. Im currently using (media="handheld")
<link rel="stylesheet" type="text/css" hrf="css/media.css" media="handheld" />
There are too many mobile device models out there to write stylesheets for; you'd be better off adjusting your CSS based on Screen Size.
This is especially helpful for targeting Android Tablets which comes in different sizes.
See this useful tutorial for further explanation:
http://css-tricks.com/resolution-specific-stylesheets/
So, instead of targeting a specific screen dimensions (which would keep changing as more devices are released), you'd want stylesheets that change according to the screen size.
Then you'll add several stylesheets:
<link rel="stylesheet" media="screen and (min-width: 480px) and (max-width: 700px)" href="css/small.css" />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
etc.
So iPhones would use the small.css, and tablets larger than 700px will use medium.css.
Handheld is more for devices like PDAs or feature phones than iOS or Android devices. You're much better off using media queries to detect device capabilities and then adjust accordingly. Here's an example article: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
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!