我的響應網站只能在某些設備上正常工作

我創建了一個響應式網站，但我的主頁在任何電話上都沒有響應。我嘗試了幾個不同的。
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手機。我的代碼中有一個問題，android不支持？

來源

2017-01-02 Catalin Sandu

您有重疊的媒體查詢，是故意的嗎？ – connexo

是的，我是故意的 –

'（min-width：150px）'的用途是什麼？ –

基於額外的信息，它看起來像你的background-image設置在<body>。這就是你需要：

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

最初的回答也包含在此相關的部分：

另一種選擇是使用Flexbox的佈局：

給你<body>display:flex; flex-direction: column;min-height:100vh;
設置flex-grow: 0;立即孩子，你不想長高
設置flex-grow: 1;立即的孩子，你想在高度成長。如果您需要更詳細的解決方案，您應該提供有關佈局的更多詳細信息。

注意：不要忘記以flexbox爲前綴。使用autoprefixer並使用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

我的響應網站只能在某些設備上正常工作

回答

相關問題