Question

所以我的代码中有一个媒体查询来检查设备宽度。它工作正常，显然不是在IE8或更低版本，因为不支持媒体查询。

因此我试图向IE8抛出一个样式表（我认为我选择了为较低分辨率而构建的样式表）但似乎我的媒体查询（无论是在IE8评论之前还是之后）都阻止IE8链接到任何样式表一点都不。

请有人告诉我一个解决方法吗？有没有办法在IE8评论中检查设备宽度？

这是我的代码;

<!DOCTYPE HTML>
     <html lang="en">
         <head>

             <meta charset="UTF-8">
             <!--[if lt IE 9]>
 <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
 <![endif]-->


                 <link type="text/css" rel="stylesheet"  media="screen
    and (min-device-width:600px) and (max-device-width:1024px)" href="oldScreen.css">
                 <link type="text/css" rel="stylesheet"  
 media="screen   and (min-device-width:1025px)" href="home.css">

                 <!--[if lt IE 9]>
 <link type="text/css" rel="stylesheet" href="oldScreen.css">
 <![endif]-->

Answer 1

我猜测IE8不喜欢对同一个样式表的两个引用。如果是这种情况，那么您可以通过向其中一个引用添加虚拟参数并让浏览器将其视为两个单独的样式表调用来逃避：<link type="text/css" rel="stylesheet" href="oldScreen.css?iedummy">

修改

更改



到



Answer 2

将这些媒体查询移到CSS文件中（永远不要将媒体查询内联）。
遵循标准设备尺寸的格式。（http://css-tricks.com/snippets/css/media-queries-for-standard-devices/）



/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

/* Smartphones (portrait and landscape) ----------- */ @media only screen and (min-device-width : 320px) and (max-device-width : 480px) { /* Styles */ } /* Smartphones (landscape) ----------- */ @media only screen and (min-width : 321px) { /* Styles */ } /* Smartphones (portrait) ----------- */ @media only screen and (max-width : 320px) { /* Styles */ } /* iPads (portrait and landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { /* Styles */ } /* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { /* Styles */ } /* iPads (portrait) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { /* Styles */ } /* Desktops and laptops ----------- */ @media only screen and (min-width : 1224px) { /* Styles */ } /* Large screens ----------- */ @media only screen and (min-width : 1824px) { /* Styles */ } /* iPhone 4 ----------- */ @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) { /* Styles */ }

媒体查询取消链接IE8样式表

2 个答案: