我的响应网站只能在某些设备上正常工作

我创建了一个响应式网站，但我的主页在任何电话上都没有响应。我尝试了几个不同的。
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

我的响应网站只能在某些设备上正常工作

回答

相关问题