Layout unterschiedlich im iOS Safari

Diskutiere Layout unterschiedlich im iOS Safari im CSS Forum im Bereich Programmierung; Hallo zusammen, ich bin Neueinsteiger im Thema HTML und CSS und versuche mich gerade an einem kleinen Projekt. Habe einiges an Erfahrung in C#...
Neues Thema erstellen Antworten
  • Layout unterschiedlich im iOS Safari Beitrag #1
A
AndyRandy691
New member
Beiträge
2
Punkte Reaktionen
0
Hallo zusammen,

ich bin Neueinsteiger im Thema HTML und CSS und versuche mich gerade an einem kleinen Projekt. Habe einiges an Erfahrung in C#, WinForms und WPF allerdings nicht in CSS. Ich habe mein Layout mit CSS soweit gestaltet, dass es im Firefox auf dem PC gut funktioniert und sich wie gewollt an die Größe des Browserfensters anpasst. Rufe ich die Seite über mein iPhone auf zerschießt es aber das Layout. Mein Ziel wäre folgendes Layout:

website_layout.png
So sieht es im Firefox auch aus.
Im Hintergrund ein Background-image, welches zentriert ist und das Fenster füllt ohne das Seitenverhältnis zu ändern. Darauf eine halb-transparente Box, die jeweils 80% Breite und Höhe des Fensters einnehmen soll. Im oberen Teil davon eine Input box, die einen margin zur halbtransparenten Box hat. Darunter ein Bild, welches horizontal zentriert ist mit festem Seitenverhältnis und welches den verfügbaren Platz ausnutzt ohne das Seitenverhältnis zu ändern. Die Buttons sind unten auf dem Bild platziert und sollen idealerweise über die Breite des Bildes verteilt werden.

Auf dem iPhone ist das eher so:

1654869992838.png

Habe auch schon gegoogelt und einiges zu -webkit properties gefunden, konnte es damit aber nicht fixen. Vielleicht besteht bei meinem Layout auch ein grundsätzliches Propblem. Daher vertraue ich jetzt auf die Community hier. Hier mal mein Code:

HTML: 
<!DOCTYPE html>
<html>
<link href="css/style.css" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <meta name="description" content="Spiele das Wedding-Tinder zur Hochzeit">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>

<body>
    <form action="Submit.php" method="post">
        <div class="container">
            <div class="grid">
                <input type="text" name="guests" placeholder="Du bist?">
                <div class="portrait">
                </div>
                <div class="subgrid">
                    <style>
                        .submit-button {
                            background-position: center;
                            background-color: transparent;
                            background-size: cover;
                            object-fit: contain;
                            display: table-cell;
                            height: 8vh;
                            width: 8vh;
                            border-radius: 4vh;
                            border: none;
                            box-shadow: inset 0 0 0 2px rgb(32, 236, 195);
                            -webkit-box-shadow: inset 0 0 0 2px rgb(32, 236, 195);
                            grid-area: confirmBtn;
                            justify-self: left;
                            margin-left: 5vmin;
                            align-self: center;
                            position: relative;
                            text-align: center;
                            transition: all 0.1s ease-in-out;
                            -webkit-transition: all 0.1s ease-in-out;
                        }


                        .submit-button:active {
                            background-color: rgb(131, 247, 161);
                            box-shadow: inset 0 0 0 2px rgb(131, 247, 161);
                            -webkit-box-shadow: inset 0 0 0 2px rgb(131, 247, 161);
                            transform: scale(0.8, 0.8);
                            -webkit-transform: scale(0.8, 0.8);
                        }

                        .fa-heart {
                            content: "\f004";
                            background: linear-gradient(45deg, rgb(32, 231, 169), rgb(33, 240, 221));
                            ;
                            background-clip: text;
                            font-size: 3vh;
                            -webkit-text-fill-color: transparent;
                            transition: transform 0.1s ease-in-out;
                            -webkit-transition: transform 0.1s ease-in-out;
                        }

                        .submit-button:active .fa-heart {
                            background: white;
                            background-clip: text;
                            -webkit-text-fill-color: transparent;
                            transform: scale(1.25, 1.25);
                            -webkit-transform: scale(1.25, 1.25);
                        }

                        .refuse-button {
                            background-position: right;
                            background-color: transparent;
                            background-size: cover;
                            display: table-cell;
                            height: 8vh;
                            width: 8vh;
                            border-radius: 4vh;
                            border: none;
                            box-shadow: inset 0 0 0 2px rgb(221, 69, 94);
                            -webkit-box-shadow: inset 0 0 0 2px rgb(221, 69, 94);
                            grid-area: refuseBtn;
                            justify-self: right;
                            margin-right: 5vmin;
                            align-self: center;
                            position: relative;
                            text-align: center;
                            transition: all 0.1s ease-in-out;
                            -webkit-transition: all 0.1s ease-in-out;
                        }

                        .refuse-button:active {
                            background-color: rgb(245, 54, 50);
                            transform: scale(0.8, 0.8);
                            -webkit-transform: scale(0.8, 0.8);
                        }

                        .fa-close {
                            background: linear-gradient(45deg, rgb(221, 69, 135), rgb(255, 137, 65));
                            background-clip: text;
                            font-size: 5vh;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            transition: transform 0.1s ease-in-out;
                            -webkit-transition: transform 0.1s ease-in-out;
                        }

                        .refuse-button:active .fa-close {
                            background: white;
                            background-clip: text;
                            -webkit-background-clip: text;
                            -webkit-text-fill-color: transparent;
                            transform: scale(1.25, calc(1.25));
                            -webkit-transform: scale(1.25, calc(1.25));
                        }
                    </style>
                    <button class="refuse-button" type="submit" name="btnRefuse"><i class="fa fa-close"></i></button>
                    <button class="submit-button" type="submit" name="btnSubmit"><i class="fa fa-heart"></i></button>
                </div>
            </div>
        </div>
    </form>
</body>

</html>

CSS: 
@font-face {
    font-family: "Gotham";
    src: url(gothamroundedlight_21020.ttf) format("truetype");

}

@font-face {
    font-family: "GothamBold";
    src: url(GothamRoundedMedium_21022.ttf) format("truetype");
}

html {
    height: 100%;
}

body {
    background-image: url("../img/Background.JPG");
    height: 100%;
    width: 100%;
    -webkit-background-size: center;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}


.container {
    display: block;
    position: absolute;
    height: 80%;
    width: 80%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    offset: 0;
    padding: 4vmin;
    background-color: rgba(255, 255, 255, 0.5);
    -webkit-border-radius: 3vmin;
    border-radius: 3vmin;
}

form {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
}

.grid {
    display: grid;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    grid-gap: 3%;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 10% 88%;
    grid-template-areas: "name name name"
        "photo photo photo";
}

input {
    border-radius: 2vmin;
    background-color: rgba(255, 255, 250, 0.8);
    border: none;
    width: 100%;
    text-align: center;
    font-family: "Gotham";
    font-size: 5vh;
    -webkit-grid-area: name;
    grid-area: name;
}

.portrait {
    -webkit-grid-area: photo;
    grid-area: photo;
    background-image: url(../img/Portrait.PNG);
    width: 100%;
    max-height: 100%;
    -webkit-aspect-ratio: 3/4;
    aspect-ratio: 3/4;
    -webkit-background-size: contain;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    margin-bottom: 15px;
}


.subgrid {
    display: grid;
    width: 100%;
    max-height: 100%;
    -webkit-aspect-ratio: 3/4;
    aspect-ratio: 3/4;
    object-fit: contain;
    object-position: bottom;
    -webkit-grid-area: photo;
    grid-area: photo;
    grid-template-columns: 50% 50%;
    grid-template-rows: 80% 20%;
    grid-template-areas: ". ."
        "refuseBtn confirmBtn";
}

Vielen Dank schon mal und viel Grüße
Andy
 
  • Layout unterschiedlich im iOS Safari Beitrag #2
S
Sempervivum
Well-known member
Beiträge
760
Punkte Reaktionen
125
Hallo AndyRandy und willkommen im Forum!
Ich konnte dein Problem auch ohne iPhone reproduzieren, denn im Opera bekomme ich das selbe Bild wie auf deiner zweiten Grafik. Die Erklärung ist folgende: Du hast zwar dem Subgrid eine Breite von 100% gegeben aber andererseits ein Seitenverhältnis von 3/4. Das führt dazu, dass das Subgrid das äußere Grid nicht vollständig ausfüllt. Offensichtlich sind sich jetzt die Browser mit dem Defaultwert für die Ausrichtung nicht einig: FF zentriert das Subgrid, während Opera es links ausrichtet. Erzwinge ich die Zentrierung mit justify-items: center; für das äußere Grid wird das innere auch im Opera zentriert. In anderen Browsern habe ich es nicht untersucht aber ich erwarte, dass es dort auch funktioniert.

Auch wenn sich dein Problem mit einer Zeile CSS lösen lässt, noch folgende Hinweise:

CSS mitten im Body ist nicht valide. Auch wenn sich kein Browser daran stört, solltest Du es besser in die CSS-Datei übernehmen.

Dieses beim äußeren Grid ist für mich sinnfrei:
Code: 
grid-template-areas:
        "name name name"
        "photo photo photo";
Wozu ein Grid mit drei Spalten einrichten, wenn Du sie dann wieder zu einer zusammen fügst? Oder hast Du damit etwas anderes damit vor, was in diesem HTML nicht sichtbar ist?

Überflüssige Container erschweren das Layout und machen es unübersichtlich. Es trifft nicht zu, dass um alles ein div-Container herum sein muss oder darin. Ein form-Tag ist nicht tabu für Styling, ebenso wenig wie ul, li etc.
 
  • Layout unterschiedlich im iOS Safari Beitrag #3
A
AndyRandy691
New member
Beiträge
2
Punkte Reaktionen
0
Hallo Sempervivum,

vielen Danke für die Tipps und die schnelle Hilfe. Jetzt klappt es, das war ja wirklich schnell zu lösen, aber manchmal sieht man den Wald vor lauter Bäumen nicht. Die 3 Spalten habe ich jetzt direkt zu einer gemacht. Das war noch ein veralteter Versuch das Layout zu gestalten. Den css-teil im Body habe ich wie du geschrieben hast ausgelagert.

Beste Grüße
Andy
 
Thema:

Layout unterschiedlich im iOS Safari

Oben Unten