0

他のすべてが機能している理由に問題を見つけることができないようですが、JSは低解像度です。JSとエクスプローラーに関連する問題についてボードをスキャンしました。私は10を実行していて、画面の1つで解像度を800 x 600に減らしました。クロムは両方の画面で機能します。つまり、高解像度の画面に共鳴しますが、低解像度の画面は、スキップするように高解像度の設定に従います。低解像度。

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

高解像度の画像と異なる解像度にはメディア クエリを使用することをお勧めします。表示するサイズの 2 倍の画像を作成し、高解像度のメディア クエリ内で元のサイズの 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 に答える