IE JavaScript和CSS问题

Question

我似乎无法找到问题，为什么除了JS分辨率低之外，其他所有功能都可以正常工作。 我已经在电路板上扫描了与JS和资源管理器有关的问题。 我正在运行，即运行10，并将其中一个屏幕的分辨率降低到800 x600。我的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>

Answer 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标签。

<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

IE JavaScript和CSS问题

问题描述

1 个解决方案

解决方案1
1 2013-02-28 17:12:59

IE JavaScript和CSS问题

问题描述

1 个解决方案

解决方案1 1 2013-02-28 17:12:59

解决方案1
1 2013-02-28 17:12:59