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.
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
This is an awesomium-specific question. I am trying to make something that does screenshotting of websites for testing purposes. I need to be able to simulate mobile devices such as an iPhone or Android device. To this end, Awesomium is great but I would need to be able to set the device-width for the purposes of CSS media queries. Eg:
<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" />
Is this possible?
Yes, it is possible.
Unfotunately Awesomium has a nasty bug. Still not fixed now on Awesomium 1.7.3.0.
If HTML tag has properties, page won't work with media queries:
<html lang="ru-RU">
But you remove properties, it should work just fine:
<html>
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.
My customers' website works fine in all major web browsers. Except for the iPad. Some things render a little bit differently.
I'm using the following conditional stylesheet
<link href="{$SkinDir}/ipad.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 600px) and (max-width: 1024px)" >
It now fixes the iPads' stylesheet problem that I had....
BUT
The site worked fine on other devices such as my HTC Phone. But now that the iPad stylesheet has been loaded, it is now reverting to that stylesheet.
I tried using :
<link href="{$SkinDir}/phones.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 600px)" >
But it hasnt seem to have cascaded to the phone handset at all, It is still referring to the ipad stylesheet.
Is there any way at all, I can just target the iPad!?
It is worth noting that the site is running on a SMARTY Templating engine. The file that relates to the conditional stuff can be found here
Many Thanks in advance.
Do the conditional css < link > on the server level (php), rather than the client level.
you can use this http://shaunmackey.com/articles/mobile/php-auto-bowser-detection/ to detect the iPad and set a flag so you know which css to include.
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