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