Grafiken für Handyauflösungen pixelgenau oder vom Verhältnis?

LeanderAT · 17. Oktober 2018

Danke! Hab auch noch nachgelesen. Alle haben Arial außer Android.

Ich hab Probleme mit dem Einbauen deiner Codezeilen. Bei mir wird das Logo immer gleich groß dargestellt.

Bei mir:
CSS:

Code:

* { padding: 0; margin: 0; }

body
{
font-family: Verdana, Arial, sans-serif;
color: #000000;
scrollbar-face-color: #003300;
scrollbar-highlight-color: #006633;
scrollbar-3dlight-color: #006633;
scrollbar-darkshadow-color: #000000;
scrollbar-shadow-color: #000000;
scrollbar-arrow-color: #ffffff;
scrollbar-track-color: #000000;
}

#center {
position: relative;
width: 320px;
height: 480px;
background-color: #ffffff;
box-sizing: border-box;
margin: 0px auto;
}

#logo
{
}

img#logo {
width: 20%; /* Breite 80% des Eltern-Elements */
max-width: 320px; /* Breite aber max. 320px */
height: auto; /* Die Hoehe wird automatisch anhand des Inhalts gewaehlt */
margin: 0 auto; /* Kein Margin oben und unten, rechts und links dafuer automatisch waehlen (zentrieren) */
}

#navi
{
position: absolute;
top: 110px;
width: 320px;
height: 38px;
font-size: 15px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;
}

#content
{

position: absolute;
top: 152px;
width: 302px;
color: #000000;
background-color: #f8f8f8;
font-size: 12px;
overflow: auto;
left: 8px;
}
...
....

HTML:

Code:

<body>

<div id="center">
<div id="logo"><img src="img/m_logo.jpg"></div><!--Ende logo-->
<div id="navi"><div class="dropdown">
  <button class="dropbtn">Menü</button>
  <div class="dropdown-content">
    <a href="#">Anfang</a>
    <a href="#">Neues</a>
    <a href="#">Biografie</a>
    <a href="#">Diskografie</a>
    <a href="#">Downloads</a>
    <a href="#">Poesie</a>
    <a href="#">Fotografie</a>
    <a href="#">Kontakt</a>
  </div></div></div><!--Ende navi-->

<div id="content">Lorem ipsum ...
</div><!--Ende content-->


</div><!--Ende center-->
</body>

Crast · 18. Oktober 2018

'img#logo' selektiert ein img-Element mit der Id 'logo', du hast aber 'div#logo img' (also ein img-Element in einem div-Container mit der Id 'logo')

Es duerfte auch schon reichen, wenn du einfach die Id von dem div an das img verschiebst.

LeanderAT · 18. Oktober 2018

Danke!

Dieses ID-Ding bei Bildern kannte ich noch nicht.

Klappt jetzt.

Crast · 18. Oktober 2018

Eine Überischt der CSS-Selektoren: https://www.w3schools.com/cssref/css_selectors.asp

LeanderAT · 21. Oktober 2018

Crast, vielen Dank für deine Hilfe! Du hast mir sehr geholfen...bin auf einem guten Weg, etwas, das mir gefällt, zu basteln.

Eher oldschool...aber mir gefällts.

Stehe aber noch vor einem Problem.

http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php

Das ist jetzt die Handy-Version für 360x740 (für andere Größen hab ich schon was). Es gibt normal einen Rand von 8px (Margin)...in Grün. Ich habe die Maße des centers mit 344x722. 344, weil Rand links und rechts. Der Content wird auf weißem Hintergrund dargestellt...daher ist überall, wenn es nicht scrollt, auch unten ein grüner Rand.
Beispiel: http://www.seelenpuls.at/hpneu/m_neues_de.php

Wählt man aber Biografie -> Leander...ist der Content höher und man muss scrollen. Somit ist unten am Ende des Textes KEIN grüner Rand mehr! Ich möchte dort aber den Rand in jedem Fall haben!
Lösung: ein hoher height-Wert im Center. Nachteil: man kann überall scrollen, auch wenn kaum Text wie bei "Neues" steht.

Ich habe eine andere Lösung gewählt....einfach unter dem Content ein neuer Div, relative...der x Pixel breit einen grünen Rand einfügt. Im Browser sieht dann alles normal aus, aber auf dem Handy sieht es nicht gut aus und ich weiß nicht, warum!

Hier ein Screenshot vom Handy:
https://abload.de/img/unschoentfet2.png

Bitte runterladen und zoomen...ich hab in Rot die grauen Überlappungen markiert...im Browser habe ich diese nicht, aber das Handy zeigt sie an! Ja, sieht man kaum, aber ich bin da zu perfektionistisch.

Crast · 22. Oktober 2018

Wenn ich mir mit den Devtools von Chrom deine Seite anschaue, faellt mir direkt auf, dass du mit dem Position Attribute sehr viel arbeitest. Die inflaetionaere Verwendung davon verursacht haeufig Probleme, wenn man die Groesse bzw Position eines bestehendes Elements aendern moechte, eins entfernt oder hinzufuegt.

Mein Loesungsvorschlag waere, dass du dem Element, das den gruenen Hintergrund hat, ein padding-top und padding-bottom gibst. Dann musst du aber drauf achten, das Element selbst wachsen darf und der Parent dieses Elements die Scrollbare flaeche ist. Vermutlich kommt dir dabei aber deine DOM-Struktur in die Quaere.

Und noch eine kleine Anmerkung/Kritik die nicht boese gemeint ist, sondern als Anregung dient: Nur weil etwas Oldschool aussehen soll, muessen nicht die selben Techniken verwendet werden wie frueher.
Moechte damit nur sagen, dass man moderne Standards einhalten kann um den Nutzer eine moeglichst gute Erfahrung zu bieten, gleichzeitig aber den Style erreichen den man moechte.
In deinem Fall bezieht sich das insbesondere auf das "Responsive Design".

LeanderAT · 23. Oktober 2018

Danke! Ja, ich hab die Techniken von früher, weil ich mich nicht auskenne und damals halt einiges zusammengesucht habe, Codeschnippsel. Ich verwende kein Template, sondern schaue z.B. nach, wie man was zentriert und tippe dann den ganzen Code selber.

1) Wie es jetzt aussieht, ist alles ok:
http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php

Kleiner grüner Rand drumherum. Das einzige Manko ist, dass der grüne Rand ein border-bottom ist vom Content. Und man warum auch immer diese Schnittlinien auf dem Handy sieht (aber nicht im PC-Browser!). Da muss man zwar mit der Lupe gucken -> zoomen, aber sie sind da.

EDIT: Ich habe jetzt entdeckt, dass es nicht an PC vs. Handy liegt, sondern am Browser an sich. Im Firefox sieht man keine Nahtstellen, im Chrome schon (sowohl PC als auch Handy!)
Bitte den obigen Link ansehen (kleine Nahtstellen) bzw. auf Menü -> Neues klicken, wo man eine große Nahtstelle sieht. Ich hab NULL Ahnung, warum Chrome das macht und Firefox nicht.

Code:

* { padding: 0; margin: 0; }

body
{
font-family: sans-serif, Verdana, Arial;
color: #000000;
background-color: #556B2F;
}

#center {
position: relative;
width: 350px;
height: 630px;
box-sizing: border-box;
margin: 5px auto 0px auto;
}

#logo {

position: absolute;
width: 350px;
height: 220px;
background-color: #ffffff;
box-sizing: border-box;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 350px 220px;
}

#navi
{
position: absolute;
top: 175px;
width: 60px;
height: 40px;
font-size: 16px;
color: #000000;
background-color: #ffffff;
margin-left: 10px;

}

#header
{
position: absolute;
top: 187px;
width: 238px;
height: 30px;
font-size: 16px;
color: #000000;
left: 85px;
}

#content
{
position: absolute;
top: 218px;
width: 340px;
color: #000000;
background-color: #ffffff;
font-size: 14px;
overflow: auto;
padding-left: 5px;
padding-right: 5px;
border-bottom: 5px solid #556B2F;
}

2) Wenn man im Menü auf "Neues" geht, hätt ich gern, dass auch bei wenig Text der weiße Hintergrund vertikal den Handyscreen füllt, aber das geht wohl nicht so einfach...ich weiß nicht, wie viel Platz ein Handy hat, reinen Platz...ohne Navigationsbuttons usw. ... da gibts Berechnungen im Net, aber da muss man dann zig Code einfügen anscheinend. Ich lass es wohl so oder gebe eine min-height an.

3) Weiters hat der Menü-Button manchmal einen orangen Rand, aber nur auf dem Handy. Keine Ahnung! Ich habe nirgends so eine Farbe eingegeben.

Crast · 23. Oktober 2018

LeanderAT schrieb:
Da muss man zwar mit der Lupe gucken -> zoomen, aber sie sind da.

Wenn es nur beim zoomen ist, liegt es an der Pixel-Berechnung.
Ist aber darauf zurueck zu fuehren, dass du einen Border bzw ein anderes Element nimmst und der Hintergrund nicht komplett durch ein Element erzeugt wird.
Auf anderen Geraeten und Browsern kann es anders aussehen. Das ganze ist etwas, wo man in der Webentwicklung stark mit zu kaempfen hat: Jeder Browser-Hersteller kann das machen was er will, zwar gibt es einige Standards, aber wie diese umgesetzt werden liegt bei jedem selbst.

LeanderAT schrieb:
3) Weiters hat der Menü-Button manchmal einen orangen Rand, aber nur auf dem Handy. Keine Ahnung! Ich habe nirgends so eine Farbe eingegeben.

Das duerfte passieren, wenn du auf den Rand klickst, richtig? Wenn ja: Dann handelt es sich um eigeschaften fuer input:focus, speziell die outine property

CSS:

input:focus, button:focus {
    outline: none;
}

LeanderAT schrieb:
da gibts Berechnungen im Net, aber da muss man dann zig Code einfügen anscheinend. Ich lass es wohl so oder gebe eine min-height an.

Ich wuerde dir einfach das Angebot machen, dass wenn du mir die Source bereitstellst ich mir das ganze anschaue und fuer dich etwas aufraeumen wuerde. Haette dafuer aber wohl erst am Wochenende zeit.
Selbstverstaendlich wuerde ich dir mit Kommentaren und eventuell einer kleinen readme.md die Aenderungen naeher erklaeren. Teile kannst du auch gerne in einer Teamviewer-Session nach verfolgen. Nachbesprechungen waeren acuh moeglich.

LeanderAT · 23. Oktober 2018

Danke für deine Hilfe!

Das mit der Lupe meinte ich nicht mit einer wirklichen Lupe, sondern einer der Fehler ist eher schwer zu erkennen während der andere klar sichtbar ist und vielleicht am Chrome liegt. Ich sehe ihn aber NUR, wenn ich im Chrome den Dev-Modus an habe für Handys...im normalen Chrome nicht.

Wenn man im Chrome eben Dev-Tools an hat oder die Page auf dem Handy im Chrome ansieht, ist bei "Biografie -> Leander" 2x ein kleiner grauer Rand zu sehen (1).

Bei 2) sieht man, dass viel Rand bei "Neues" zu sehen ist.

Das mit dem Button korrigiere ich, danke!

Hier der Screenshot, damit du weißt, was ich meine: https://abload.de/img/cssiee7s.jpg

Das mit deinem Angebot wäre sehr nett, aber ich will dir auch nicht so viel Zeit kosten.

Ich probier noch etwas rum und lasse es dann.

Crast · 24. Oktober 2018

Wie gesagt... diese Fehler entstehene aufgrund von "Berechnungsfehlern". Meistens tauchen solche Fehler nur auf, wenn der Zoom des Browsers verwendet wird.
Sie fallen besonders dann auf, wenn man zwei ueberlappende bzw nebeneinanderliegende Elemente hat, die die gleiche Farbe haben.
Du koenntest das Problem loesen, indem du eine ordentliche DOM-Struktur erzeugst.
Also ein Element das den kompletten Hintergrund darstellt, in diesem befinden sich dann ein Element fuer den Header, den Content und dem Footer. In jedem dieser Elemente befinden sich weitere Elemente die andere Elemente gruppieren.

Kann mir momentan leider nicht mehr deine Mobile Seite anschauen, kann dir (momentan) also keinen besseren Vorschlag erstellen.

Woher der graue Rand kommt, kann ich dir leider auch nicht sagen, aber eventuell daher dass du eine feste Breite definiert hattest und die default BG-Color des Browsers grau ist.

LeanderAT · 26. Oktober 2018

Danke! Du konntest die Seite nicht aufrufen, weil ich eine Umleitung installiert hatte. Ruft man eine mobile Datei vom Desktop auf, wird stattdessen die Desktopversion geladen, ruft man eine Desktopdatei auf dem Handy auf, kommt die mobile Variante. Ich hab die Umleitung aber jetzt temporär deaktiviert.

Hab gestern noch beim normalen Design was gearbeitet...jetzt wollte ich beim Handydesign weitermachen, aber ich komme einfach nicht auf die Lösung!

Hab mir wohl auch was zerschossen.Ich weiß nicht, wie aufwendig das ist, aber falls es nicht zu lang dauert und du mir helfen würdest, wär es toll, die fehlenden Codezeilen einzubauen.

So soll es werden:
1) Breite 360px Festwert, Höhe 220 (Logo) + Content min. 312
2) Es soll zentriert sein. Bei einer Breite von z.B. 400 soll dann links und rechts gleich viel Rand sein. Oben und unten soll ein Rand von 10px sein.
3) Logo: 350 breit, 220px hoch, Festwert.
4) Content: auch 350px breit, min. 312px hoch. Hat der Content also z.B. vom Text her eine geringere Höhe, wird der Contentbackground trotzdem angezeigt. Gibt es viel Content, ist viel Text vorhanden, soll der Background einfach automatisch mehr Höhe haben.
5) Es geht ein grüner Rand um Logo und Content mit 5px Breite. Das ganze Ding hat 360px Breite, Logo/Content 350 breit, also 10 Unterschied / 2 = 5px Rand jeweils links, rechts, oben, unten.

HIER kommt bei meinem Entwurf der Fehler! Der grüne Rand mit dem weißen Background des Contents erzeugt die komischen grauen Dinger.

Crast · 26. Oktober 2018

Schau dir mal bitte folgenden Code an.

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Mediathek</title>
    <link href="style.css" rel="stylesheet"/>

    <style>

        html, body {
            margin: 0;
        }

        #wrapper {
            margin: auto;
            width: 360px;
            min-height: calc(220px + 312px);
            padding: 5px;
            background: #ffaa00;
        }

        #header {
            width: 100%;
            height: 220px;
            background: #aa00ff;
        }

        #content {
            width: 100%;
            min-height: 312px;
            background-color: #00ffaa;
        }

    </style>

</head>
<body>

<div id="wrapper">
    <header id="header"></header>
    <div id="content"></div>
</div>

</body>
</html>

Erklaerung

Zeile 10 bis 12
Margin von html und body entfernen, falls vorhanden (meisten browser setzen auf den body einen margin von 8px)

Zeile 14 bis 20
Das Element mit der ID Wrapper wird zentriert, erhaelt eine fixe Breite, eine Minimalhoehe (in diesem Fall berechnet da ich faul bin)
dein Padding fuer den "Rahmen" und eine Hintergrund-Farbe. Der Hintergrund bildet den Rahmen.

Zeile 22 bis 23
Definiert das Layout deines Headers (Element mit ID header)

Zeile 28 bis 32
definiert das Layout deines Contents (Element mit ID content)

Und hier noch eine Moeglichkeit:

HTML:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Mediathek</title>
    <link href="style.css" rel="stylesheet"/>

    <style>

        html, body {
            margin: 0;
        }

        #wrapper {
            margin: auto;
            width: 360px;
            min-height: calc(220px + 312px);
            border: 5px solid #ffaa00;
            box-sizing: border-box;
        }

        #header {
            width: 100%;
            height: 220px;
            background: #aa00ff;
        }

        #content {
            width: 100%;
            min-height: 312px;
            background-color: #00ffaa;
        }

    </style>

</head>
<body>

<div id="wrapper">
    <header id="header"></header>
    <div id="content"></div>
</div>

</body>
</html>

Hier wird ein richtiger Rahmen erzeugt.

Aber beide Varianten sind aufgrund ihrer Struktur nicht mal im Ansatz dazufaehig Grafische Fehler zu erzeugen, da alle zusammenhaengenden Flaechen auch zusammen haengen.

Es gibt in der ein Prinzip, dass nennt sich KISS. - Keep it simple, stupid! Sehr hilfreich um komplexe Systeme zu gestalten und sehr hilfreich wenn man wenig Erfahrung hat. Man sollte aufhoehren so kompliziert zu denken

LeanderAT · 27. Oktober 2018

Vielen herzlichen Dank für deine Hilfe und Mühe!!!

Werde ich später testen.

LeanderAT · 28. Oktober 2018

Hat geklappt, vielen Dank!

Ich habe wohl das Konzept von Divs falsch verstanden....ich habe zusätzlich zu deinem Code noch die Divs Navi und Topic gesetzt, allerdings musste ich da "position" verwenden, weil sonst nichts mittig war.

Ein Problem bleibt noch. Wie kann ich den Content-Text reinrücken? Er soll nicht links und rechts am grünen Rand anstehen. Ich verstehe immer nicht, ob man da margin oder padding nimmt...aber beide führen dazu, dass der Content-Div rechts rausgeht. Hätte ich z.B. Breite 360 Pixel, hätte ich dann bei padding oder margin die Breite von der Gesamtbreite abgezogen, um das Rauslaufen zu verhindern...aber du hast ja width=100%?

http://www.seelenpuls.at/hpneu/m_biografie_leander_de.php

Mein Code:

CSS:

Code:

* { padding: 0; margin: 0; }

html, body {
font-family: sans-serif, Verdana, Arial;
color: #000000;
margin: 0;
}

/* width immer devicewidth, min-height deviceheight-100px */
#wrapper {
margin: 7px auto 7px auto;
width: 360px;
min-height: 540px;
border: 5px solid #556B2F;
box-sizing: border-box;
background-color: #ffffff;
}

#header {
width: 100%;
height: 220px;
background-color: #ffffff;
background-image: url("img/m_bg_c.jpg");
background-repeat: no-repeat;
background-size: 360px 220px;
}

#navi
{
position: absolute;
top: 192px;
font-size: 16px;
color: #000000;
margin-left: 10px;
}

#topic
{
position: relative;
top: 189px;
width: 238px;
height: 30px;
font-size: 16px;
color: #ffffff;
left: 85px;
}

#content {
width: 100%;
min-height: 320px;
background-color: #ffffff;
color: #000000;
font-size: 14px;
overflow: auto;
}

img#inclinks {
width: 28px;
height: 28px;
}

img#toparrow  {
width: 28px;
height: 28px;
}

/* Style The Dropdown Button */
.dropbtn {
    padding: 5px;
    font-size: 16px;
    color: #000000;
    border: 3px solid #669900;
    cursor: pointer;
    text-align: center;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #556B2F;
    font-size: 15px;
    width: 105px;
    z-index: 1;
    border: 3px solid #000000;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 8px 8px;
    text-decoration: none;
    color: #ffffff;
    display: block;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #669900;
color: #ffffff;
font-weight: bold;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;

}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #669900;
    color: #ffffff;
    border: 2px solid #ffffff;
}

button:focus {
outline: none;
}

p
{
margin-top: 10px;
}

small
{
font-size: 14px;
}

small2
{
font-size: 14px;
}

h1
{
color: #ffffff;
font-size: 14px;

}

h2
{
color: #ffffff;
font-weight: bold;
font-size: 14px;
}

h2 span
{
color: #ffffff;
}

.menuepunkt
{
color: #ffffff;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
}

.greenerror
{
color: #990000;
margin-top: 0px;
}

a.class1:link
{
color: #000000;
font-weight: normal;
text-decoration: underline;
font-size: 15px;
}

a.class1:visited
{
color: #000000;
font-weight: normal;
text-decoration: underline;
}

a.class1:hover
{
color: #669900;
font-weight: normal;
text-decoration: underline;
}

a.class2:link
{
color: #ffffff;
text-decoration: underline;
font-size: 15px;
}

a.class2:visited
{
color: #ffffff;
text-decoration: underline;
}

a.class2:hover
{
color: #669900;
text-decoration: underline;
}

a.class3:link
{
color: #ffffff;
text-decoration: underline overline;
font-size: 15px;
}

a.class3:visited
{
color: #ffffff;
text-decoration: underline overline;
}

a.class3:hover
{
color: #669900;
text-decoration: underline overline;
}

a.class4:link
{
color: #000000;
text-decoration: none;
font-size: 15px;
}

a.class4:visited
{
color: #000000;
text-decoration: none;
}

a.class4:hover
{
color: #000000;
text-decoration: underline overline;
}

a.button1{
 display:inline-block;
 padding: 8px;
 border: 2px solid #000000;
 border-radius: 1px;
 box-sizing: border-box;
 text-decoration:none;
 color:#000000;
 text-align:center;
  transition: all 0.1s;
}

a.button1:hover{
 color:#ffffff;
 background-color:#669900;
}

.kontaktfeld {
font-size: 12px;
}

/** LIGHTBOX MARKUP **/

.lightbox {
        /** Default lightbox to hidden */
 margin-left: -2000px;

        /** Position and style */
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.78);
    transition: all .6s;
}

.lightbox img {
        /** Pad the lightbox image */
        max-width: 100%;
        max-height: 100%;

  transition: all .7s;
}

.lightbox:target {
        /** Remove default browser outline */
        outline: none;

        /** Unhide lightbox **/
margin-left: 0;
transition: all .8s;
}

.thumb {
  max-width: 50px;
  max-height: 50px;
}

HTML:

Code:

<body>

<div id="wrapper"><a name="gototop"></a>
    <header id="header"> <div id="navi"><?require "m_inc_menue_de.php";?></div>
    <div id="topic"><p class="menuepunkt">BIOGRAFIE</p></div></header>
    <div id="content">...
  <p><a href="#gototop" title="Zum Anfang"><img src="img/toparrow.png" id="toparrow" border="0"></a></div><!--Ende content-->
</div><!--Ende wrapper-->

</body>
</html>
{/spoiler]/code]

Crast · 28. Oktober 2018

LeanderAT schrieb:
Ich habe wohl das Konzept von Divs falsch verstanden....

"The <div> tag defines a division or a section in an HTML document. The <div> element is often used as a container for other HTML elements to style them with CSS or to perform certain tasks with JavaScript." (Quelle: w3schools)

LeanderAT schrieb:
Ich verstehe immer nicht, ob man da margin oder padding nimmt...

Schau dir das mal an:
https://stackoverflow.com/questions...ween-css-margin-and-padding/35621046#35621046
Reihenfolge ist (von aussen nach innen): margin, border, padding, content
margin: abstand dieses Elements zu anderen Elementen. Wenn zwei margins nebeneinander sind, verschmelzen sie
border: rand/kanto des elements. gibt es auch, wenn er nicht gestyled ist! er ist nur nicht sichtbar.
padding: Platz zum Inhalt des Elements. Standardmäßig wird der rand und das padding separat zur breite draufgerechnet. mit der Eigenschaft boxsizing kann das geändert werden.
content: selbsterklärend

LeanderAT schrieb:
aber du hast ja width=100%

Weil ich faul bin. ich möchte sowenig Elemente wie nötig anpassen, wenn ich eine Änderung mache.

LeanderAT · 28. Oktober 2018

Danke, du hast mir sehr geholfen!

Denkst du, dass es sich ausgeht von der Höhe her, wenn ich für das Design von 360x640 min-height 540 nehme? Reichen 100px für das URL-Feld eines Handys und eventuell Navigationsbuttons am Ende des Screens? Ist von Handy zu Handy unterschiedlich. Manche Handys haben es am Ende des Screens, andere gar nicht im Screen, sondern darunter.

Crast · 29. Oktober 2018

Nein.

Du hast zwei grosse Probleme wenn es um Mobile Devices geht
1. Es gibt sehr viele sehr komische Aufloesungen die du nicht alle Abfangen kannst
Dafuer gibt es aber auch eine Loesung: Responsive Webdesign

2. Die Browser auf Mobile Devices fuegen eine Addressleiste hinzu, die in den meisten Faellen nicht(!) vom Body abgezogen wird, stattdessen wird der Body bzw die View um x Pixel nach unten verschoben und ist somit nicht komplett sichtbar. auf iOS wird zusaetzlich noch eine Navigation-Leiste unten ngefuegt, die die Ansicht ueberlappt.
Die Loesung hierfuer: Responsive Webdesign

Du merkst, dass wenn du eine Webseite ordentlich auf Mobile Devices bringen moechtest und allen eine gute Erfahrung bieten moechtest, dann kommst du nicht um responsive Webseite herum.
Damit wuerdest du dir auch auf im Desktopbereich einen Gefallen tun, da es dort auch einige Aufloesungen gibt, die mit deiner Seite nicht zurecht kommen (sowohl vertikales als auch horizontales scorlling da Bildschirm kleiner als deine minimal erwartete Aufloesung).

LeanderAT · 3. November 2018

Danke!

Ja, nur ist es mit Responsive Webdesign nicht so einfach bzw. nicht bei fixen Hintergründen.

Ich habe gerade ein anderes Problem: Hab zuerst die Versionen für Handys mit geringer Auflösung gemacht...für 360x640 usw...alles ok...dann habe ich bei meinem Handy nachgesehen. Das Xiaomi Redmi Note 5 hat eine Auflösung von 1080x2160. Ich habe dann einfach ein Design für 540x1080 gemacht...doch es passt nicht einmal in die Breite...warum?

Ich weiß schon, wegen Viewport...aber wie kenne ich den von meinem Handy?

Hab das gefunden:

https://mediag.com/blog/popular-screen-resolutions-designing-for-all/

Da gibts welche, die meine Breite haben, aber dennoch einen anderen Viewport...einmal bei 1080 412, einmal 480...

EDIT Ich habe jetzt http://viewportsizes.com/mine/ gefunden...dort steht, wenn ich die Seite mit dem Handy aufrufe, 393x659 Viewport.

Allerdings habe ich nachgemessen...es ist der Bereich zwischen den roten Linien:
https://abload.de/img/testyhdfj.jpg

Es ist wirklich der Bereich OHNE URL-Feld und Steuerungsfeld. Ist das immer so, dass der Viewport der reine Anzeigenbereich ist ohne URL usw. oder gibt es auch Handys, bei denen das mitgezählt wird?
Z.B. hat das Galaxy S9 360x740. Kann ich da die Seite für 360x740 machen, weil URL-Feld usw. schon einberechnet ist? Ich habe momentan für 320x480, 360x640, 320x568, 375x667 usw. Versionen gemacht, aber nie für die ganze Höhe. Habe immer nur 80% verwendet maximal, damit für URL-Feld usw. Platz ist.
Bei 360x640 z.B. ist das Design für 360x520...die restlichen 120 sind zur Sicherheit für URL-Feld usw.

Crast · 3. November 2018

LeanderAT schrieb:
Ja, nur ist es mit Responsive Webdesign nicht so einfach bzw. nicht bei fixen Hintergründen.

Auch mit Hintergrundbildern ist das kein Problem.

LeanderAT schrieb:
Ich weiß schon, wegen Viewport...aber wie kenne ich den von meinem Handy?

Zum einen brauchst du den Meta-Tag den ich in Post #9 erwaehnt habe.
Dann hilft dir diese Seite weiter: WhatIsMyBrowser

LeanderAT schrieb:
Es ist wirklich der Bereich OHNE URL-Feld und Steuerungsfeld.

Beides beeinflusst NICHT den Viewport. Wird die Adress-Leiste angezeigt, wird die gesamte View nach unten geschoben und somit ist ein Teil nicht sichtbar, die Groesse ist aber immer noch die Selbe.
Es gibt auch keine Moeglichkeit das zu umgehen, das ist die Sache des Browser-Entwicklers.

LeanderAT schrieb:
Ich habe momentan für 320x480, 360x640, 320x568, 375x667 usw. Versionen gemacht

Und da setzt Responsive Webdesign an. Eine kleine Aenderung setzt so viele Aenderungen voraus, dass ich es schon als "dumm" bezeichne, dieses Vorgehen zu waehlen.

LeanderAT schrieb:
Habe immer nur 80% verwendet maximal, damit für URL-Feld usw. Platz ist.

Das ist natuerlich moeglich, aber du solltest dich damit abfinden, dass das heutige Web nicht so funktioniert, bzw Webseiten heute anders benutzt werden als vor 5 oder 10 Jahren. Auch wenn man einen Old-School Web-Auftritt haben moechte, sollte man gewisse Standards befolgen, ansonsten verliert man Nutzer.

Es gibt so viele Aufloesungen und entsprechend viele Faelle, dass du diese nicht abdecken kannst.
Schon mal geschaut, was mit deiner Webseite passiert, wenn man sein Handy dreht?
Wie gehst du mit Nutzern um, die die Desktop-Version nicht Vollflaechig anzeigen? Oder Leute die den Monitor im Portrait-Mode nutzen? ...?

Fuer all deine Probleme die die Mobile Version hat, gibt es nur eine Loesung: Reponsive Webdesign.
Alles andere sind keine Loesungen, sondern nur Konstelationen die in einen besonderen Fall funktionieren.
Wenn du die Moeglichkeit hast, nutz deine Seite mal mit einem iPhone, dann wirst du auf einmal merken, dass auch unten eine Leiste ist. Oder nutz ein Android dass die Navigationselemente auf den Screen hat.
Du flickst eine Stelle, dafuer reist du an anderen Stellen aber ein Loch in die Wand.

LeanderAT · 4. November 2018

Danke für die Antwort!
Aber wie soll Responsive Design bei mir funktionieren?
Ich habe hier die Version für 360x640 hochgeladen:
http://www.seelenpuls.at/hpneu/m_index_de.php

Zuerst möchte ich, dass die Startseite geladen wird, damit man grafisch mehr sieht. Aufgrund des Hochformats geht sich leider der Berg nicht komplett aus. Landscape vom Handy ist übrigens kein Problem, weil das bei mir keinen Sinn macht und im Landscape alle Seiten sch... aussehen, mit Ausnahme von Videos z.B.

Wenn du auf die Seite oben gehst, kommt die Startseite. Dann wähle einen beliebigen Punkt aus und du siehst das "normale" Design...also kleinere Grafik, dann der Content mit min-height....und wenn es darüber hinaus geht wie bei Biografie->Leander scrollt man runter mit "nach oben"-Button am Ende.

Ich hab keine Ahnung, wie ich die Startseite und die normale Seite (zwei verschiedene Grafiken) responsive machen kann. Wenn das Hintergrundbild variabel wird von der Größe her, ändert sich ja das Format bzw. wird es gestreckt oder sonstwie vom Format geändert...und das sieht beim Logo hässlich aus. Ich habe die ganzen verschiedenen Varianten je nach Auflösung ja wegen des Hintergrundbildes gemacht, damit es nicht gestreckt wird oder das Logo verunstaltet.

Wie würdest du es responsive machen? Also dass sich das Hintergrundbild dem jeweiligen Handy anpasst und auch die Platzierung vom Menü-Button und dem Topic-Text (Neues, Biografie, Downloads usw.) gleich bleibt?

Ich kann mir schon vorstellen, die Startseite so zu machen, dass z.B. 80% Grafikplatz sind, 20% der Platz für Deutsch, Englisch, die Socialmedia-Buttons...und min-height 60px, weil es den braucht...aber mit den Grafiken kapier ich es nicht bzw. Position von Menü-Button und Topic.

STARTSEITE, GRAFIK 1:

Code:

* { padding: 0; margin: 0; }

html, body {
font-family: sans-serif, Verdana, Arial;
color: #000000;
margin: 0;
}

/* width immer devicewidth, min-height deviceheight-120px */
#wrapper {
margin: 0px auto;
width: 360px;
min-height: 500px;
border: 5px solid #556B2F;
box-sizing: border-box;
background-color: #ffffff;
}

#header {
width: 100%;
height: 440px;
background-color: #ffffff;
background-image: url("img/m_bg_360x640_anf.jpg");
background-repeat: no-repeat;
background-size: 360px 440px;
}

#navi
{
position: absolute;
top: 185px;
font-size: 16px;
color: #000000;
margin-left: 10px;
}

#topic
{
position: absolute;
top: 195px;
width: 238px;
height: 30px;
font-size: 16px;
color: #ffffff;
margin-left: 80px;
}

/* width immer devicewidth - 20 für border und padding */
#content {
width: 340px;
min-height: 60px;
background-color: #ffffff;
color: #000000;
font-size: 14px;
overflow: auto;
padding: 5px;
text-align: center;
}

img#inclinks {
width: 32px;
height: 32px;
}

img#toparrow  {
width: 28px;
height: 28px;
}

/* Style The Dropdown Button */
.dropbtn {
    padding: 5px;
    font-size: 16px;
    color: #000000;
    border: 3px solid #669900;
    cursor: pointer;
    text-align: center;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #556B2F;
    font-size: 15px;
    width: 105px;
    z-index: 1;
    border: 3px solid #000000;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 8px 8px;
    text-decoration: none;
    color: #ffffff;
    display: block;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #669900;
color: #ffffff;
font-weight: bold;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;

}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #669900;
    color: #ffffff;
    border: 2px solid #ffffff;
}

button:focus {
outline: none;
}

p
{
margin-top: 10px;
}

small
{
font-size: 14px;
}

small2
{
font-size: 14px;
}

h1
{
color: #ffffff;
font-size: 14px;

}

h2
{
color: #ffffff;
font-weight: bold;
font-size: 14px;
}

h2 span
{
color: #ffffff;
}

.menuepunkt
{
color: #ffffff;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
}

.greenerror
{
color: #990000;
margin-top: 0px;
}

a.class1:link
{
color: #000000;
font-weight: normal;
text-decoration: underline;
font-size: 15px;
}

a.class1:visited
{
color: #000000;
font-weight: normal;
text-decoration: underline;
}

a.class1:hover
{
color: #669900;
font-weight: normal;
text-decoration: underline;
}

a.class2:link
{
color: #ffffff;
text-decoration: underline;
font-size: 15px;
}

a.class2:visited
{
color: #ffffff;
text-decoration: underline;
}

a.class2:hover
{
color: #669900;
text-decoration: underline;
}

a.class3:link
{
color: #ffffff;
text-decoration: underline overline;
font-size: 15px;
}

a.class3:visited
{
color: #ffffff;
text-decoration: underline overline;
}

a.class3:hover
{
color: #669900;
text-decoration: underline overline;
}

a.class4:link
{
color: #000000;
text-decoration: underline;
font-size: 15px;
}

a.class4:visited
{
color: #000000;
text-decoration: underline;
}

a.class4:hover
{
color: #669900;
text-decoration: underline;
}

a.class5:link
{
color: #000000;
text-decoration: underline;
font-size: 14px;
}

a.class5:visited
{
color: #000000;
text-decoration: underline;
}

a.class5:hover
{
color: #000000;
text-decoration: underline;
}

a.button1{
display:inline-block;
padding: 8px;
border: 2px solid #000000;
border-radius: 1px;
box-sizing: border-box;
text-decoration:none;
color:#000000;
text-align:center;
  transition: all 0.1s;
}

a.button1:hover{
color:#ffffff;
background-color:#669900;
}

.kontaktfeld {
font-size: 12px;
}

/** LIGHTBOX MARKUP **/

.lightbox {
        /** Default lightbox to hidden */
margin-left: -2000px;

        /** Position and style */
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.78);
    transition: all .6s;
}

.lightbox img {
        /** Pad the lightbox image */
        max-width: 100%;
        max-height: 100%;

  transition: all .7s;
}

.lightbox:target {
        /** Remove default browser outline */
        outline: none;

        /** Unhide lightbox **/
margin-left: 0;
transition: all .8s;
}

.thumb {
  max-width: 68px;
  max-height: 50px;
}

NORMALE SEITEN, GRAFIK 2:

Code:

* { padding: 0; margin: 0; }

html, body {
font-family: sans-serif, Verdana, Arial;
color: #000000;
margin: 0;
}

/* width immer devicewidth, min-height deviceheight-140px */
/* design für 360x640, min-height 520 (500+4x5 border und padding) */
#wrapper {
margin: 0px auto;
width: 360px;
min-height: 500px;
border: 5px solid #556B2F;
box-sizing: border-box;
background-color: #ffffff;
}

#header {
width: 100%;
height: 220px;
background-color: #ffffff;
background-image: url("img/m_bg_360x640.jpg");
background-repeat: no-repeat;
background-size: 360px 220px;
}

#navi
{
position: absolute;
top: 185px;
font-size: 16px;
color: #000000;
margin-left: 10px;
}

#topic
{
position: absolute;
top: 194px;
width: 238px;
height: 30px;
font-size: 16px;
color: #ffffff;
margin-left: 80px;
}

/* width immer devicewidth - 20 für border und padding */
#content {
width: 340px;
min-height: 280px;
background-color: #ffffff;
color: #000000;
font-size: 14px;
overflow: auto;
padding: 5px;
}

img#inclinks {
width: 28px;
height: 28px;
}

img#toparrow  {
width: 28px;
height: 28px;
}

/* Style The Dropdown Button */
.dropbtn {
    padding: 5px;
    font-size: 16px;
    color: #000000;
    border: 3px solid #669900;
    cursor: pointer;
    text-align: center;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
    position: relative;
    display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
    display: none;
    position: absolute;
    background-color: #556B2F;
    font-size: 15px;
    width: 105px;
    z-index: 1;
    border: 3px solid #000000;
}

/* Links inside the dropdown */
.dropdown-content a {
    padding: 8px 8px;
    text-decoration: none;
    color: #ffffff;
    display: block;

}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {
background-color: #669900;
color: #ffffff;
font-weight: bold;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
    display: block;

}

/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {
    background-color: #669900;
    color: #ffffff;
    border: 2px solid #ffffff;
}

button:focus {
outline: none;
}

p
{
margin-top: 10px;
}

small
{
font-size: 14px;
}

small2
{
font-size: 14px;
}

h1
{
color: #ffffff;
font-size: 14px;

}

h2
{
color: #ffffff;
font-weight: bold;
font-size: 14px;
}

h2 span
{
color: #ffffff;
}

.menuepunkt
{
color: #ffffff;
font-size: 15px;
font-weight: bold;
margin-top: 0px;
}

.greenerror
{
color: #990000;
margin-top: 0px;
}

a.class1:link
{
color: #000000;
font-weight: normal;
text-decoration: underline;
font-size: 15px;
}

a.class1:visited
{
color: #000000;
font-weight: normal;
text-decoration: underline;
}

a.class1:hover
{
color: #669900;
font-weight: normal;
text-decoration: underline;
}

a.class2:link
{
color: #ffffff;
text-decoration: underline;
font-size: 15px;
}

a.class2:visited
{
color: #ffffff;
text-decoration: underline;
}

a.class2:hover
{
color: #669900;
text-decoration: underline;
}

a.class3:link
{
color: #ffffff;
text-decoration: underline overline;
font-size: 15px;
}

a.class3:visited
{
color: #ffffff;
text-decoration: underline overline;
}

a.class3:hover
{
color: #669900;
text-decoration: underline overline;
}

a.class4:link
{
color: #000000;
text-decoration: underline;
font-size: 15px;
}

a.class4:visited
{
color: #000000;
text-decoration: underline;
}

a.class4:hover
{
color: #000000;
text-decoration: underline;
}

a.class5:link
{
color: #000000;
text-decoration: underline;
font-size: 14px;
}

a.class5:visited
{
color: #000000;
text-decoration: underline;
}

a.class5:hover
{
color: #000000;
text-decoration: underline;
}

a.button1{
display:inline-block;
padding: 8px;
border: 2px solid #000000;
border-radius: 1px;
box-sizing: border-box;
text-decoration:none;
color:#000000;
text-align:center;
  transition: all 0.1s;
}

a.button1:hover{
color:#ffffff;
background-color:#669900;
}

.kontaktfeld {
font-size: 12px;
}

/** LIGHTBOX MARKUP **/

.lightbox {
        /** Default lightbox to hidden */
margin-left: -2000px;

        /** Position and style */
        position: fixed;
        z-index: 999;
        width: 100%;
        height: 100%;
        text-align: center;
        top: 0;
        left: 0;
        background: rgba(0,0,0,.78);
    transition: all .6s;
}

.lightbox img {
        /** Pad the lightbox image */
        max-width: 100%;
        max-height: 100%;

  transition: all .7s;
}

.lightbox:target {
        /** Remove default browser outline */
        outline: none;

        /** Unhide lightbox **/
margin-left: 0;
transition: all .8s;
}

.thumb {
  max-width: 68px;
  max-height: 50px;
}

Grafiken für Handyauflösungen pixelgenau oder vom Verhältnis?

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ensign

Lt. Junior Grade

Ähnliche Themen