0

我似乎无法找到为什么其他一切都在工作但JS处于低分辨率的问题。我已经扫描了与 JS 和资源管理器相关的问题。我正在运行 ie 10，并将我的一个屏幕上的分辨率降低到 800 x 600。我的 chrome 可以在两个屏幕上工作，即响应高分辨率屏幕，但我的较低分辨率屏幕遵循高分辨率设置，就像它跳过一样较低的分辨率。

<!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>
4

1 回答 1

1

我建议对高分辨率图像和不同分辨率使用媒体查询。您需要做的是创建一个两倍于您想要显示的大小的图像，然后在高分辨率媒体查询中将其缩小到原始大小的 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 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-28T17:12:59.913 回答