I want to use different stylesheets for different screen widths (before and after 700px).
<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">
Doesn't work. media1366 is always overwriting media700.
The width of your device is larger than 700px, therefore
max-device-width: 700px
is not true and
min-device-width: 701px
is true, therefore the behavior you experience is actually expected.
The two rules cannot override each-other, as they are mutually exclusive.
You have to write media queries in sequence Higher Size to Lower Size, so in your case the files should be includes in sequence from Higher 701px to Lower 700px.
<link rel="stylesheet" href='media1366.css' media="screen and (min-device-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-device-width:700px)">
you just need to change the order and delete the device word
<link rel="stylesheet" href='media1366.css' media="screen and (min-width:701px)">
<link rel="stylesheet" href='media700.css' media="screen and (max-width:700px)">
See more info on this Stack Overflow Answer
Related
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/
I'm trying to optimize my webpage to 720*1200 mobile devices:
My page
It works perfectly on 320*480 and 480*800 devices, but not on 720*1200.
The page loads zoomed in,
just like the layout viewport would be 720*1030 but the visual viewport would be 360*515.
I've set the viewport tag, but it hasn't any effect.
<meta name="viewport" content="width=device-width,user-scalable=false" />
<title>teeg bejelentkezes</title>
<link rel="stylesheet" type="text/css" media="only screen and (min-device-width:720px)" href="css/style-720.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:719px) and (max-width:719px) and (min-device-width:480px) and (min-width:480px)" href="css/style.css" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:479px) and (max-width:479px)" href="css/style-320.css" />
Thanks for any help!
Recommendation:
Use min-width and max-width in the media queries.
Avoid using min-device-width and max-device-width.
Viewport meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1" />
Add minimum-scale, maximum-scale, or user-scalable if needed.
Media queries:
<link rel="stylesheet" type="text/css"
media="only screen and (min-width:720px)"
href="css/style-720.css" />
<link rel="stylesheet" type="text/css"
media="only screen and (min-width:480px) and (max-width:719px)"
href="css/style.css" />
<link rel="stylesheet" type="text/css"
media="only screen and (max-width:479px)"
href="css/style-320.css" />
Explanation:
min-width and max-width are easier to work with than min-device-width and max-device-width. Using all 4 of them may result in media queries that will not be applied in some cases, since the two sets of values do not always match.
On iOS devices, min-device-width and max-device-width act on the width in landscape mode, regardless of orientation, while min-width and max-width act on the width of the current orientation.
Also, on Android devices, min-device-width and max-device-width correspond to physical pixels, while min-width and max-width correspond to dips (device-independent pixels), which makes it easier to work with devices with a variety of pixel densities.
The Boston Globe, the best example of adaptive-content responsive design, works almost entirely on min-width and max-width.
Try these:
width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0
Thanks for answers, i've tried Matt Coughlin's suggestion, but the AVD (720*1280) included the 480px css instead of 720. In the end I switched my approach and i changed my design to responsive. RWD
and Examples
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.
I have my mobile stylesheet as such:
<link rel='stylesheet' media='only screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
And my main stylesheet as such:
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
When I go on the page from a mobile device, it has a mix of mobile and main stylesheet rules. How can I make the mobile stylesheet be exclusive to mobile devices, and the main stylesheet exclusive to the screen?
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen"/>
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='css/mobile.css' type='text/css' />
Also make sure you have this in your head:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
Well, your problem is that both devices use screens. Your css/style.css file targets any devices that uses a screen, and any styling should be as applicable to a narrow device as it is to a wide device. You may need to refactor your style rules.
Also, make sure that your mobile stylesheet is listed after the generic screen one, or else the generic screen stylesheet will override the mobile one.
Below are my stylesheets for my mobile site:
<META name="viewport" content="width=320; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<META name="HandheldFriendly" content="true" />
<link type="text/css" rel="stylesheet" media="screen and (min-device-width: 481px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/smartmobile.css" />
<link type="text/css" rel="stylesheet" media="handheld" href="css/mobile.css" />
I loaded the page in an iPhone and it looks like it's supposed to. However when I load the page in a Blackberry it doesn't use the "handhled" one but rather tries to use the other stylesheets. Anyone have any thoughts to why this happening?
Yes most phones even more so the older ones will simply ignore the "media" type and I would suggest using some from of server side detection if you need the css to be different on different phone types.
Consider media queries (as you've done for iPhone) instead of media types. http://www.alistapart.com/articles/responsive-web-design/ Many devices don't support the handheld media type.