応答可能なウェブサイトは、一部のデバイスでのみ正常に動作します

レスポンシブウェブサイトを作成しましたが、私のホームページはどの電話でも応答しません。私はいくつかの異なるものでそれを試しました。ここで
This is how it should look on phones.
And this is how it looks on a few ones.応答可能なウェブサイトは、一部のデバイスでのみ正常に動作します

私のホームページのHTMLです：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta http-equiv="x-ua-compatible" content="ie=edge"> 

    <link rel="stylesheet" type="text/css" href="cssHomePage.css"> 
    <title>Catalin Sandu</title> 
</head> 
<body id="body"> 

    <div id="mydiv"> 
     <div id="topMenuName"><h1 id="name">CATALIN SANDU</h1></div> 

     <div class="container"> 
      <div class="nav"> 
       <ul> 
        <li><a href="about.html">about</a></li> 
        <li><a href="contact.html">contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </div> 

</body> 
</html>

そしてこれはそれのためのCSSです：

@font-face { 
    font-family: gothic; 
    src: url("Fonts/century gothic.ttf"); 
} 

body { 
    font-family: gothic, sans-serif; 
    color: #FFF; 
    text-shadow: none; 
    color: #595959; 
    background-color: #f2f2f2; 
    padding: 0; 
    height: 100%; 
} 

#body { 
    margin: 0 auto; 
    width: 100%; 
    height: auto; 
    background: url("Images/background1.png") no-repeat center center fixed; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="Images/background1.png", sizingMethod='scale'); 
    -ms-filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="background1.png", sizingMethod='scale')"; 
} 

#mydiv { 
    width: 30%; 
    height: 250px; 
    border: 1px solid #FFF; 
    position: fixed; 
    margin: auto; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
} 

.nav a:link, .nav a:visited { 
    color: #FFF; 
    font-size: 20px; 
    text-decoration: none; 
    font-family: gothic, sans-serif; 
    display: inline-block; 
    height: 40px; 
    padding: 15px 15px 0px 15px; 
} 

.nav { 
    width: 100%; 
    text-align: center; 
} 

.nav ul { 
    list-style: none; 
    padding: 0; 
    display: inline-flex; 
} 

.nav ul li { 
    margin: 0 auto; 
    display: inline; 
} 

.nav a:hover, .nav a:active, 
.nav .active a:link, .nav .active a:visited { 
    background-color: #5aada0; 
} 

#topMenuName { 
    text-align: center; 
    padding: 20px 0 0 0; 
} 

#name { 
    color: #FFF; 
    font-size: 2.5em; 
} 

@media only screen and (min-width: 150px) and (max-width: 1100px) { 

    #mydiv { 
     width: 50%; 
    } 
} 

@media only screen and (min-width: 150px) and (max-width: 770px) { 

    #mydiv { 
     width: 90%; 
     height: 300px; 
    } 

    .nav { 
     width: 100%; 
     float: left; 
    } 

    .nav ul { 
     list-style: none; 
     display: block; 
     width: 100%; 
    } 

    .nav ul li { 
     width: 100%; 
     float: left; 
    } 

    .nav a:link, .nav a:visited { 
     width: 40%; 
     padding: 10px 0 0 0; 
    } 
}

私はそれがコードの権利がたくさんあることを知っていますここでは、私は数日間それを修正しようとしていると私は問題を見つけることができません。私はまた、それが主にiOSの携帯電話で動作することを見た。アンドロイドがサポートしていないのは私のコードで問題になっていますか？

出典

2017-01-02 Catalin Sandu

あなたはメディアクエリを重ねてきた、意図的ということでしょうか？ – connexo

はい私はそれを目的にしました –

'（min-width：150px）'の目的は何ですか？ –

追加情報に基づいて、background-imageが<body>に設定されているようです。これはあなたが必要とするすべてである：

body { 
    margin: 0; 
    min-height: 100vh; 
}

初期答えはまた、この関連部分を含んでいた：

別のオプションは、フレキシボックスのレイアウトを使用することです：

はあなたの<body>display:flex; flex-direction: column;min-height:100vhを与えます。
子供が身長が伸びたくない場合は
と設定します。子供の身長を伸ばしたい子供はflex-grow: 1;に設定してください。詳細な解決策が必要な場合は、レイアウトの詳細を提供する必要があります。

注：はflexboxの接頭辞を忘れないでください。をFilter（下に）に設定します（>0%）。

出典

2017-01-02 13:55:47

しかし、背景画像は問題と思われるもので、その高さはメディアクエリによってターゲットとされていません。 'mydiv' divはおそらく問題ありませんが、テキストが白いので見えません。 – sol

最初に、どの要素が「背景画像」を持っているかについての指示はありませんでした。今彼は情報を追加しました。それは ''です。 –

私はそれを試しましたが、＃myDivの高さはページの高さの100％になります。あなたが写真で見ることができるのと同じようにしたいです。 –

私はあなたがこのようhtmlとbodyをターゲットにして、ページの高さを定義する必要があると思う：

html{ 
height:100%; 
min-height:100%; 
} 
body{ 
min-height:100%; 
}

出典

2017-01-02 14:03:10 sol

応答可能なウェブサイトは、一部のデバイスでのみ正常に動作します

答えて

関連する問題