Question

我有一个网站在台式机上显示其设计方式，但是当我从移动设备（尤其是Google Pixel 3xl）查看该网站时，它的运行情况与预期不符。我无权使用任何其他移动设备，因此我不知道它是否以相同的方式显示，但是当我使用开发人员工具并在移动模式下查看它时，我可以复制google chrome中的问题之一。但是，当我仅缩小浏览器窗口时，该网站的行为便符合我的预期。

某些技术详细信息：在带有Apache服务器的Raspberry Pi-3b上运行的个人Web服务器。该域名是从Google Domains购买的。

下面的第一张图片显示了网站在最初加载时在手机上的显示方式。如您所见，该网站显得太宽，导致右侧被剪断。

第二张图片是我挤压显示屏的结果，对不起，我不知道有更好的说法。现在，在这张图片中，除了深灰色背景和橙色边框以外，所有内容都按照我预期的方式显示。

我的目的是使它看起来像第二张图像，而无需进行“挤压”，当然，深灰色背景和橙色边框延伸到屏幕的右侧。

这是我的HTML和CSS代码：请注意，我对此并不陌生，所以希望学习友善，因为可能有一些更好的方法可以做到这一点，我只是还不了解它们：）。

Index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/css/main.css">
    <title>www.johndavidhock.net</title>
</head>

<body>
    <header>
        <div class="header-logobrand">
            <img src="assets/img/physics.png" width="75" height="75" alt="physics" />
        </div>
        <div class="header-datetime">
            <div id="header-dt-day" class="header-datetime-contents"></div>
            <div id="header-dt-date" class="header-datetime-contents"></div>
            <div id="header-dt-time" class="header-datetime-contents"></div>
        </div>
        <div class="header-nav">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </header>

    <div class="content">
        <h1>Hello, Welcome to my Website!</h1>
        <p>
            This site is for projects that I am interested in within the fields of Math, Physics and Electronics. I hope
            you enjoy your visit and perhaps learn something new.
        <p>
    </div>
    <script src="assets/js/datetime.js" type="text/javascript"></script>
</body>

</html>

main.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    font-family: Calibri, 'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
    font-size: 20px;
    background-color: lightslategray;
    color: white;
}

header{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 80px;
    align-items: center;
    background-color: #35424a;
    color: #e8491d;
    border-bottom: 3px solid #e8491d;
    position: sticky;
    top: 0;
}

.header-logobrand{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding-left: 15px;
}

.header-logobrand::after{
    content: "Math and Science with Dave";
    padding-left: 25px;
    font-size: 25px;
}

.header-datetime{
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.header-datetime div{
    padding-left: 10px;
    padding-right: 10px;
}

.header-nav{
    display: flex;
    justify-content: flex-end;
}

.header-nav ul{
    display: flex;
    justify-content: space-around;
}

.header-nav li{
    list-style: none;
    align-items: center;
    padding: 28px;
}

.header-nav a{
    text-decoration: none;
    color: #e8491d;
}

.header-nav li:hover{
    background-color: #e8491d;
}

.header-nav li:hover a{
    color: white;
}

.content{
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 50px;
}

.content h1, p{
    justify-self: center;
    align-items: center;
    text-align: center;
    font-size: 30px;
    padding: 20px;
    width: 500px;
    background-color: coral;
}

@media screen and (max-width: 768px){

    header{
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: 80px;
        position: sticky;
        top: 0;
    }

    .header-logobrand{
        display: flex;
        justify-content: center;
        align-items: center;
        padding-left: 0px;
        padding-bottom: 5px;
        border-bottom: 3px solid #e8491d;
    }

    .header-datetime{
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100%;
        border-bottom: 3px solid #e8491d;
        padding-top: 5px;
        padding-bottom: 5px;
    }

    .header-nav{
        display: flex;
        justify-content: center;
    }

    .content{
        padding-top: 0px;
    }

}

contact.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="assets/css/main.css">
    <link rel="stylesheet" href="assets/css/contact.css">
    <title>www.johndavidhock.net</title>
</head>

<body>
    <header>
        <div class="header-logobrand">
            <img src="assets/img/physics.png" width="75" height="75" alt="physics" />
        </div>
        <div class="header-datetime">
            <div id="header-dt-day" class="header-datetime-contents"></div>
            <div id="header-dt-date" class="header-datetime-contents"></div>
            <div id="header-dt-time" class="header-datetime-contents"></div>
        </div>
        <div class="header-nav">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="#">Blog</a></li>
                <li><a href="#">Projects</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
    </header>

    <div class="contact">
        <h1>John David Hock</h1>
        <p>jdh_developer@johndavidhock.net</p>
    </div>
    <script src="assets/js/datetime.js" type="text/javascript"></script>
</body>

</html>

contact.css

.contact{
    display: grid;
    grid-template-columns: 1fr;
    padding-top: 50px;

}

.contact h1, p{
    justify-self: center;
    align-items: center;
    text-align: center;
    font-size: 30px;
    padding: 20px;
    width: 500px;
    background-color: coral;
}

@media screen and (max-width: 768px){

    .contact{
        padding-top: 0px;
    }

}

网站无法在移动设备上正确显示

0 个答案: