admin管理员组文章数量:1410682
I have added respond.js to activate media queries in ie7+8, the problem that Im having though is that ie7+8 now seem to read the retina display media query which as you can imagine is messing up my layout. Has anyone else experienced this problem and if so how can this be prevented?
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}
Update for anyone having the same problem:
Basically I moved any hd media queries into their own .css file (hd.css) then added a conditional statement into the section of my site that prevents lte IE 8 from seeing it.
I have added respond.js to activate media queries in ie7+8, the problem that Im having though is that ie7+8 now seem to read the retina display media query which as you can imagine is messing up my layout. Has anyone else experienced this problem and if so how can this be prevented?
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2) {
}
Update for anyone having the same problem:
Basically I moved any hd media queries into their own .css file (hd.css) then added a conditional statement into the section of my site that prevents lte IE 8 from seeing it.
Share edited Jan 25, 2012 at 17:23 styler asked Jan 25, 2012 at 16:51 stylerstyler 16.5k25 gold badges85 silver badges139 bronze badges 1- 1 you need to hide such things from the innocent eyes of IE7-8. – Dan D. Commented Jan 25, 2012 at 16:53
5 Answers
Reset to default 6You could add a class specific to IE detection (if you haven't already) to your html tag with jQuery, a lot like Modernizr does for browser capabilities. Then wrap the styles within the media query:
@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
html.no-ie div#mydiv{
/* STYLES FOR #mydiv HERE */
}
}
Detect the browser with jQuerys $.browser property and add a class to your html tag (with version...because...why not?):
/* CHECK IF BROWSER IS IE */
if($.browser.msie){
/* GET THE BROWSER VERSION...BECAUSE WE CAN! */
var version = $.browser.version;
/* ADD CLASSES FOR BROWSER + VERSION TO HTML TAG ie. <html class="ie ie6"> */
$('html').addClass("ie ie" + Math.floor(version));
}
Hope that's helpful.
Try removing the "only screen" references from your media query, so that it reads:
@media (-webkit-min-device-pixel-ratio: 2),
(min-device-pixel-ratio: 2){
}
with boilerplate's document head, I added a class "modern" to the last conditional without conditions the one with the <!--> before the html tag:
<!doctype html>
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js es lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js modern" lang="en"> <!--<![endif]-->
then in my retina css -- if the retina css is inside a media query with max and min (this why respond.js reads it), I have:
.modern #logo a { /*w & h LOGO */
background-image: url(../images/[email protected]);
-moz-background-size:200px 81px; /*w & h of original 72dpi image REMEMBER THIS IS THE LARGE LOGO*/
-ie-background-size:200px 81px;
-o-background-size:200px 81px;
-webkit-background-size:200px 81px;
background-size:200px 81px;
}
I use a bination of Steve O's and Christina Arasmo Beymer's answers:
To be a little more specific to media queries capabilities i included css-mediaqueries detection into my custom build of Modernizr.
Then you have a mediaqueries class in your html tag, don't have to write your own JS or manually add a class to your html.
Now you can do:
@media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
html.mediaqueries #element {
}
}
If you use Compass i can remend this mixin: Retina-Sprite-for-Compass
My very simple solution exploits the bug's core issue in order to fix itself. The root problem is that respond.js sees the -webkit-min-device-pixel-ratio property, doesn't know what to do, and simply ignores it, incorrectly showing the style block. My solution is to copy the whole media query block, paste it in the css right after and change '-webkit-min-device-pixel-ratio' to '-webkit-useless-fake-property' then make all the css rules a negation of the previous block. respond.js will ALSO ignore this, pass it through and it will undo the previous block!
Example:
@media all and (-webkit-min-device-pixel-ratio:2) {
#selector {
background-image:url("img2x.png"); /* 1000 x 400 */
background-size:500px 200px;
}
}
@media all and (-webkit-useless-fake-property:2) {
#selector {
background-image:url("img.png"); /* 500 x 200 */
background-size:auto;
}
}
Seeing as this is really only for retina images there wont be many rules to 'undo'. Browser that don't have their head under a rock and their fingers in their ears will use native CSS3 and simply ignore the -webkit-useless-fake-property media query.
本文标签： javascripthow do i prevent respondjs reading my retina display media queryStack Overflow
版权声明：本文标题：javascript - how do i prevent respond.js reading my retina display media query? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1744953789a2634236.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论