简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Meine Website wird auf dem Desktop einwandfrei angezeigt, auf dem mobilen Bildschirm jedoch nicht
P粉827121558
P粉827121558 2024-03-30 15:09:41
0
1
365

Ich gestalte meine persönliche Website mit HTML/CSS. Der Text lässt sich jedoch nicht auf das Telefon skalieren. Bitte beachten Sie das Bild unten.

Websites sehen auf dem Desktop gut aus, werden aber auf Mobilgeräten nicht gut angezeigt.

Mobile Anzeige

Meine Google Drive-Einbettung passt nicht einmal auf den Bildschirm meines Telefons. Mobiltelefonanzeige GGD PDF eingebettet

Was soll ich tun, um dieses Problem zu lösen? Vielen Dank.

Hier ist mein Code:

HTML

<!DOCTYPE html>
<html>
    <head>
        <title>EXAMPLE</title>
        <meta charset="UTF-8"
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="Hoa Dang">
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap" rel="stylesheet">
        <link rel="stylesheet" href="css/main.css">
        <link rel="stylesheet" href="css/projects.css">
        <link rel="stylesheet" href="css/nav.css">
        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.1/css/all.min.css">
        <link rel="shortcut icon" type="image/x-icon" href="EXAMPLE"/>
        <link rel="manifest" href="manifest.json">
        <style>
            @import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap');
            </style>
    </head>

    
    <body>
        <nav>
            <input type="checkbox" id="chk">
            <label for="chk" class="show-menu-btn">
                <i class="fas fa-bars"></i>
            </label>

            <ul id="nav-ul">
                <li class="nav-li">
                    <a class="nav-link selected">HOME</a>
                </li>
                
                <li class="nav-li">
                    <a class="nav-link">ABOUT</a>
                </li>

                <li class="nav-li">
                    <a class="nav-link">CV</a>
                </li>
 
                <li class="nav-li">
                   <a class="nav-link">PROJECTS</a>
                </li>

         
                <label for="chk" class="hide-menu-btn">
                    <i class="fas fa-times"></i>
                </label>
            </ul>
        </nav>

        <div id="HOME">
            <div class="center">
                <h1 id="main-header">EXAMPLE</h1>
                <h3 id="sub-header">example.com <span class="green-detail">&</span> example.com</h3>
            </div>
        </div>

        <div id="CV">
            <div class="center">
                <iframe src="example.com" width="640" height="480" allow="autoplay"></iframe>
            </div>
        </div>

        <div id="PROJECTS" class="center">
            <div id="img-container"></div>
        </div>

        <div id="ABOUT">
            <div class="center">
                <h2 id="about-header">example.comE<span class="green-detail">:</span></h2>
                <p id="about-text">
                    <br> Text
                    <br> <br> 
                </p>
            </div>
        </div>
        
        <footer>
            <ul id="sm-ul">                
                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-youtube"></i>
                    </a>
                </li>

                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-instagram"></i>
                    </a>
                </li>

                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-facebook"></i>
                    </a>
                </li>

                <li class="sm-li">
                    <a class="sm-logo" href="example.com" target="_blank">
                        <i class="fab fa-linkedin"></i>
                    </a>
                </li>
            </ul>
        </footer>

    </body>
</html>

CSS

* { padding: 0; margin: 0; }

:root {
    --base-color: #d2dae2;
    --secondary-color: #0be811;
}

body {
    background-color: #1e272e;
    font-family: 'DM Sans', sans-serif;
    color: var(--base-color);
    overflow: scroll;
}

body::before{
    content: '';
    position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    background-image: url("example.com");
    background-size: cover;
    background-position: top-center;
    opacity: 0.2;
    filter: blur(7px);
}

nav, footer, #about-text, #contact-container {
    width: 100%;
}

nav {
    margin-top: -30px;
    position: fixed;
    top: 0;
    text-align: right;
    z-index: 2;
}

footer {
    position: fixed;
    bottom: 0;
    padding: 5vh;
}


#about-text, #sub-header {
    font-size: 2.3vh;
    line-height: 1.6;
    font-weight:400;
}

#main-header, #sub-header {
    text-align: center;
}

#main-header {
    font-size: 8.5vh;
}

#nav-ul {
    padding-right: 5vh;
}

#sm-ul, #nav-ul {
    list-style-type: none;
}


#about-header {
    font-size: 4vh;
    font-weight: bold;
}

.center, #contact-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 0;
}

.sm-logo {
    color: var(--base-color);
    font-size: 3vh;
    transition: 0.2s ease-in;
}

.sm-logo:hover, .nav-link:hover, .nav-link.selected, .green-detail {
    color: var(--secondary-color);
}

.sm-li {
    display: inline-block;
    margin-left: 5vh;
}

.nav-link {
    font-size: 1.8vh;
    cursor: pointer;
    text-decoration: none;
    transition: 0.2s ease-in;
}

.nav-li {
    display: inline-block;
    margin: 5vh 5vh 0 0;
}

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

    nav, footer, #nav-top, #nav-ul, .nav-link {
        padding: 0;
        margin: 0;
    }

    #sm-ul, #nav-ul {
        text-align: center;
    }

    .sm-li {
        margin: 0 2vh 5vh 2vh;
    }

    .nav-li {
        margin: 5vh 2vh 0 2vh;
    }
}

P粉827121558
P粉827121558

Antworte allen(1)
P粉647504283
P粉6475042832024-03-31 00:51:36 1 Etage

您的网站未按预期在移动设备上显示的原因是您需要更多媒体查询来根据尺寸指定布局和设计。您有一个媒体查询。使用以下媒体查询更改浏览器的大小，并使用代码，使其类似于您的预期结果：

/* Media Queries */

@media (min-width:320px)  { /* Vertical Screen Phones */ 
    
}

@media (min-width:480px)  { /* Horizontal/Landscape Screen Phones */ 
    
}

@media (min-width:600px)  { /* Tablets and Vertical iPads */
    
}

@media (min-width:801px)  { /* Tablet, Horizontal/Landscape iPads, low-resolution Laptops */
     
}

@media (min-width:1025px) { /* Big Tablets */
     
}

@media (min-width:1281px) { /* Laptops and Desktops */
    
}

此外，我建议坚持使用 rem 或 em 而不是 vh。它的使用更广泛，并且更具可扩展性。

Wie +0
Antwort hinzufügen
Beliebte Themen
Mehr>
Populäre Artikel
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website：Online-PHP-Schulung für das Gemeinwohl，Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln！