Webseite Optimieren

  • Guten Tag,

    ich habe eine frage bezüglich meiner Maintance, wenn ich die Seite ganz normal offen hat dann sieht sie so aus:

    Ziemlich simpel:

    Unbenannt.PNG

    Aber wenn ich sie kleiner mache oder auf dem Handy drauf schaue sieht sie so aus :

    Unbenannt.PNG Wo das blaue ist steht dann soon

    Ich möchte es halt für Handy optimieren aber ich weiß nicht ganz wie es geht und frage deshalb nach Hilfe :)

    HTLM:

    <!DOCTYPE html>

    <html lang="de">

    <head>

    <title> ----- | Maintenance</title>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!--===============================================================================================-->

    <link rel="stylesheet" type="text/css" href="css/util.css">

    <link rel="stylesheet" type="text/css" href="css/main.css">

    <!--===============================================================================================-->

    </head>

    <body>

    <!-- -->

    <body background="images/bg03.jpg">

    </div>


    <!-- -->

    <h3 class="l1-txt2 txt-center">

    Coming Soon

    </h3>

    </div>

    </form>

    </div>

    </div>


    </body>

    </html>

    Danke für eure Hilfe ;)

    b4dYGRF.gif

  • Hallo,


    du musst deine Webseite responsive machen, am besten eignet sich dafür Bootstrap als Framework oder du schreibst dir das selbst zusammen, ist auch nicht schwer.

    Ehh, ja, Bootstrap für eine Single Page Application verwenden und dabei nicht mal ansatzweise die Komponenten nutzen, wieso nicht.

    Geht auch einfacher:

    Code
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    Das kommt in den Header.

    Bootstrap macht da nicht viel anders under the hood, außer Media Queries zu nutzen (natürlich noch mehr), aber er braucht ja für dieses Problem keine Media Queries, geschweige denn ein komplettes Framework.

    3 Mal editiert, zuletzt von dotnet run (24. Oktober 2019 um 18:11)

  • Ehh, ja, Bootstrap für eine Single Page Application verwenden und dabei nicht mal ansatzweise die Komponenten nutzen, wieso nicht.

    Geht auch einfacher:

    Code
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">

    Das kommt in den Header.

    Bootstrap macht da nicht viel anders under the hood, außer Media Queries zu nutzen (natürlich noch mehr), aber er braucht ja für dieses Problem keine Media Queries, geschweige denn ein komplettes Framework.

    Funktioniert leider nicht :/

    b4dYGRF.gif

  • Ich schätze mal, dass dadurch zwar die Texte angepasst werden, aber der Hintergrund nicht.

    Meine Variante sollte bewirken, dass ein Zoom gar nicht erst möglich ist.

    Lösch den Scheiß aus dem body-Tag und pack folgendes in die CSS:

    Code
    body {
        background: url("images/bg03.jpg") center/contain no-repeat;
    }

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!