At the biginning of my stylesheet, I have those 3 lines that adjust the font-size depending of the sreen resolution. It work perfectly in all browsers except IE (I tested IE7-8).
#media screen and (min-width: 0px) and (max-width: 1199px){html, body{font-size:8px;}}
#media screen and (min-width: 1200px) and (max-width: 1499px){html, body{font-size:9.5px;}}
#media screen and (min-width: 1500px){html, body{font-size:11px;}
how can i resolve this problem?
Is there an hack, script, pluggin i can add to make it work in IE ?
Thanks
IE 8 and below don't understand media queries. You can use a comment in your HTML to make a stylesheet visible to only IE.
See this page for an explanation: http://css-tricks.com/how-to-create-an-ie-only-stylesheet/
Eg:
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<![endif]-->
In the below example, a media query serves one stylesheet to screens up to 480px wide, and another for screens 481 or larger. It serves the same stylesheet to users of IE 8 or below:
<link
rel="stylesheet"
type="text/css"
media="screen and (max-device-width: 480px)" href="/css/style.css" />
<link
rel="stylesheet"
type="text/css"
media="screen and (min-device-width: 481px)" href="/css/style.css"/>
<!--[if lt IE 9]>
<link rel="stylesheet" type="text/css" href="/css/style.css"/>
<![endif]-->
Internet Explorer does not support them till IE9.
Scott Hanselman has a nice story about media queries and progressive enhancement.
http://www.hanselman.com/blog/LearningAboutProgressiveEnhancementSupportingMobileBrowsersWithCSS3MediaQueries.aspx
Of course it ignores them, until IE9, no media queries support is there.
If you're looking for a jQuery solution to solve this problem with older browsers of IE, here is a good resource.
http://www.protofunc.com/scripts/jquery/mediaqueries/
hope this helps
Sure, take a look at Respond. I've used it a couple of times to extend this functionality to the older IEs.
https://github.com/scottjehl/Respond
Related
First of all I know that this question was asked a lot before, but every answer was false or outdated.
Here is my problem: I want to load different CSS files based on device width. Here is the answer that is always given and that is false:
<link media="screen and (min-width: 721px)" rel="stylesheet" href="./cs/styles.css" />
<link media="screen and (max-width: 720px)" rel="stylesheet" href="./cs/styles-min.css" />
The problem with this answer is that the both files are loaded --->> both files are sent to us on HTTP request. Here is the proof on mozilla:
My question is how do I get only one to be loaded/sent to us on HTTP request. Btw I don't want to use js or server-side language if not necessary, if I really really have to, thats ok but give me reasons why your way is better. Thanks a lot!
Why don't you try using media queries in your css file. Only one css file is needed, and you specify when the screen size is smaller, then the style wrapped inside media queries will override
IE 9+, Firefox 3.6+, Safari 3+, Any Chrome, Opera 10+. Mozilla suggests starting the media attribute of the with “only” which will hide the stylesheet from older browsers that don’t support media queries. That may or may not be what you actually want to do… case dependent of course.
<link rel='stylesheet' media='screen and (max-width: 700px)' href='css/narrow.css' />
<link rel='stylesheet' media='screen and (min-width: 701px) and (max-width: 900px)' href='css/medium.css' />
<link rel='stylesheet' media='screen and (min-width: 901px)' href='css/wide.css' />link rel="stylesheet" media="screen and (min-device-width: 800px)" href="800.css"/>
Are seen this ref : https://css-tricks.com/resolution-specific-stylesheets/
Demo : https://css-tricks.com/examples/ResolutionDependantLayout/example-one.php
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 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 included some media queries in my design to change the width of some elements of the page based on the browser's width. The queries look like this:
#media screen and (min-width:1024px)
#media screen and (max-width:1024px)
Chrome, Safari and Firefox work great, only IE is a problem. I know that all versions prior to IE 9 don't support this feature, but they don't work in IE 9 at all. What might be the problem?
Do you have compatibility mode turned on?
Make sure you have right DOCTYPE declaration.
It's strongly recommended that websites use the HTML5 document type in order to support the widest variety of established and emerging standards (in this case: CSS3), as well as the broadest range of web browsers: <!DOCTYPE html>
use the following conditions
#media only screen (min-width: 1px) and (max-width:599px)
instead of
#media only screen (max-width:599px)
and make sure min-width is 1px as IE9 doesn't pickup 0px
Unfortunately min-width is simply not supported in any version of IE. So if you use this convention:
<!--- CSS Selector :: Desktop --->
<link rel="stylesheet" type="text/css" href="css/desktop.css" media="screen and (min-width:960px)" label="desktop">
<!--- CSS Selector :: Tablet PC --->
<link rel="stylesheet" type="text/css" href="css/tablet.css" media="screen and (min-width:768px) and (max-width:959px)" label="tablet">
<!--- CSS Selector :: Phone --->
<link rel="stylesheet" type="text/css" href="css/phone.css" media="screen and (min-width:320px) and (max-width:499px)" label="phone">
It will ignore it all.
Reference.
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!