Question

我创建了一个快速响应的网站，但我的主页在任何手机上都没有响应。我尝试了几个不同的 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不支持吗？

Answer 1

根据额外信息，您的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。在Filter（下方）>0%中使用Source此设置：

Answer 2

我认为您需要通过定位html和body来定义页面的高度：

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

我的响应式网站仅在某些设备上正常运行

2 个答案: