IE浏览器JavaScript和CSS问题

我似乎无法找到问题，为什么一切工作，但在低分辨率的JS。我已经扫描了与JS和浏览器相关的问题。即时通讯运行，即10，并减少我的屏幕上我的屏幕为800×600.我的铬在两个屏幕上工作，即resonds到更高的屏幕res ress，但我的较低res屏幕后高分辨率设置，如跳过较低的分辨率。IE浏览器JavaScript和CSS问题

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
    "http://www.w3.org/TR/html4/strict.dtd" 
    > 
<html lang="en"> 
<head> 
    <title></title> 

    <!--[if IE]> 
    <script type="text/JavaScript"> 
     if (screen.height <= 800) { 
      document.write('<link rel="stylesheet" type="text/css" href="ie_low.css" />'); 
     } 
     else { 
      document.write('<link rel="stylesheet" type="text/css" href="ie.css" />'); 
     } 
    </script> 
    <![endif]--> 

    <script type="text/JavaScript"> 
     var screenheight = screen.height; 
     if (screenheight <= 800) { 
      document.write('<link rel="stylesheet" type="text/css" href="style_low.css">'); 
     } 
     else { 
      document.write('<link rel="stylesheet" type="text/css" href="style.css">'); 
     } 
    </script> 

<style> 

</style> 
</head> 
<body> 
    <div class="container"> 
     <div class="header"> 

     </div> 
     <div class="title"> 
      <img src='logo.png' class="logo" alt='logo'> 
     </div> 
     <div class="main"> 

     </div> 
    </div> 
</body> 
</html>

来源

2013-02-28 user1978664

你不需要使用JavaScript的这一点 - 这是什么样的是CSS媒体查询是专门做的事情。（IE8不支持媒体查询，但有办法解决这个问题）请参阅http://caniuse.com/css-mediaqueries – SDC 2013-02-28 17:07:15

IE10不支持条件注释，因此您的IE脚本从不执行。 – Teemu 2013-02-28 17:09:25

我会建议使用高分辨率图像和不同分辨率的媒体查询。您需要做的是创建一个两倍于您想要显示大小的图像，然后在高分辨率媒体查询中将其缩小为其原始大小的50％。

高清图片：

@media only screen and (-moz-min-device-pixel-ratio: 1.5), 
    only screen and (-webkit-min-device-pixel-ratio: 1.5), 
    only screen and (min-device-pixel-ratio: 1.5) { 

    // half the size of image - assuming your image is 200 x 200 
    .selector {background-size:100px 100px;} 

}

这会去您现有的样式表内。您还可以使用媒体查询设置中断点，这些查询将针对不同的分辨率应用不同的CSS。像这样的东西。

断点/不同的屏幕分辨率：

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

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


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

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

META标签：

另外别忘了元标记。

<meta name="viewport" content="width=device-width">

资源的数量：

有大量的信息在那里。

http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html http://css-tricks.com/snippets/css/retina-display-media-query/ http://mobile.smashingmagazine.com/2012/10/24/beyond-common-media-query-breakpoints/ http://www.w3.org/TR/css3-mediaqueries/ http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/ https://developer.mozilla.org/en-US/docs/CSS/Media_queries

来源

2013-02-28 17:12:59

谢谢，我不知道媒体选项。我会研究这些资源！ – user1978664 2013-02-28 21:17:23

IE浏览器JavaScript和CSS问题

回答

相关问题