nicht angemeldet
Wann sind wieviel Pixel wo ungefähr 8mm?
0 0 0 0 0
Wann sind wieviel Pixel wo ungefähr 8mm?
Hallo,
nach meinem Empfinden sind 8 - 10mm auf einem iPhone eine gute Höhe für einen Button um ihn gut mit einem Finger zu treffen (gemessen auf dem Bildschirm ohne Zoom). Diese 8-10mm sind dann wieder je nach
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<meta name = "viewport" content = "width=320, initial-scale=1.0">
eine bestimmte Anzahl von Pixeln. So weit so gut!
Welche der beiden Einstellungen benutze ich, damit die 8mm ungefähr 8mm bleiben auch bei anderen Smartphones oder Tablets? Den Unterschied zwischen "Device-Pixeln" und "CSS-Pixeln" habe ich soweit verstanden, aber mangels Testgeräten bleibt bei mir eine Restunsicherheit, ob bei höher auflösenden Geräten aus 8mm nicht plötzlich 20mm oder, noch schlimmer, 4mm werden (ohne Zoom).
Viele Grüße
Siri
-
Welche der beiden Einstellungen benutze ich, damit die 8mm ungefähr 8mm bleiben auch bei anderen Smartphones oder Tablets?
Du kannst die Angaben auch einfach gleich in mm oder cm machen. Wird aber vom w3 nicht empfohlen.
-
Hallo Siri
entscheidend ist die Pixeldichte der Geräte. Die ist sehr unterschiedlich und reicht von 72ppi (Desktop Monitore) über 163ppi (iPhone 1-3), 300ppi (Nexus 10), 326ppi (iPhone 4,4s,5) bis zu 342ppi (Experia S).
Und da ist noch kein Ende in Sicht.
Daher ist eine absolute Größenangabe in px (und Co.) hier noch weniger angebracht als es bei "normalen" Seiten generell der Fall ist.
Arbeite mit relativen Größen, damit kannst du dem PPI-Irrsinn gut die Stirn bieten.
Gruß
Ole-
Hallo,
entscheidend ist die Pixeldichte der Geräte. Die ist sehr unterschiedlich und reicht von 72ppi (Desktop Monitore) über 163ppi (iPhone 1-3), 300ppi (Nexus 10), 326ppi (iPhone 4,4s,5) bis zu 342ppi (Experia S).
Und ich dachte, dasss ich genau diesen Effekt mit
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
oder
<meta name = "viewport" content = "width=320, initial-scale=1.0">ausgeschaltet hätte?
Viele Grüße
Siri-
Hi
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
oder
<meta name = "viewport" content = "width=320, initial-scale=1.0">Damit sagst du, dass in Version 1 die Breite deines Seiteninhalts der Breite deines Device entspricht und der Zoom-Faktor bei 1 ist. 320px sind also 320px.
Beim zweiten sagst du, abweichend von Version 1, dass deine Seite eine Breite von 320px hat.Auf einem iPhone 1 sind das dann aber 50mm wohingegen das auf einem iPhone 5 eben nur noch 25mm sind.
Gruß
Ole-
Hallo,
Auf einem iPhone 1 sind das dann aber 50mm wohingegen das auf einem iPhone 5 eben nur noch 25mm sind.
Mit dieser Variante:
<meta name = "viewport" content = "width=320, initial-scale=1.0">?Damit bleiben 50mm 50mm:
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">?So rum?
Viele Grüße
Siri -
-
-
-
Hallo Siri, Ole and all!
Daher ist eine absolute Größenangabe in px (und Co.) hier noch weniger angebracht als es bei "normalen" Seiten generell der Fall ist.
Arbeite mit relativen Größen, damit kannst du dem PPI-Irrsinn gut die Stirn bieten.
Dave hat es ja schon angemerkt - du "verwechselst" hier zwei verschiedene Dinge. ;-)
'px' Angaben im Stylesheet sind immer CSS-Pixel, haben also nichts mit der jeweiligen Auflösung des Displays zu tun.
Einzig bei (Raster-)Grafiken tritt quasi ein "Problem" auf, wenn sie aufgrund ihrer nativen Auflösung "vergrößert" werden bei der Darstellung.Ganz interessant finde ich auch noch die folgenden Beiträge zum Thema:
- A pixel is not a pixel is not a pixel
- Websites und Bilder für High-Resolution-Displays (Retina) optimieren
Gruß Gunther
-
Hallo,
Dave hat es ja schon angemerkt - du "verwechselst" hier zwei verschiedene Dinge. ;-)
'px' Angaben im Stylesheet sind immer CSS-Pixel, haben also nichts mit der jeweiligen Auflösung des Displays zu tun.wenn ich mit
<meta name = "viewport" content = "width=device-width, initial-scale=1.0"
einen 30px hohen Bereich definiere, hatt der "physikalisch" (beispielsweise) auf dem iPhone 4, iPhone 5, Samsung Galaxy S3, iPad 3, etc. überall ungefähr die gleiche Höhe? Hast du damit Erfahrungen?
Viele Grüße
Siri-
einen 30px hohen Bereich definiere, hatt der "physikalisch" (beispielsweise) auf dem iPhone 4, iPhone 5, Samsung Galaxy S3, iPad 3, etc. überall ungefähr die gleiche Höhe? Hast du damit Erfahrungen?
Wieso versuchst du krampfhaft absolute Maßeinheiten mit relativen Mitteln nachzubasteln? Was spricht gegen cm oder mm als Einheit?
-
Wieso versuchst du krampfhaft absolute Maßeinheiten mit relativen Mitteln nachzubasteln? Was spricht gegen cm oder mm als Einheit?
Erstens hast du es selbst geschrieben und zweitens haben meine Recherchen ergeben, das 10mm nicht 10mm sind, da sie eh von Browser umgerechnet werden, da kommen dann wieder unterschiedliche "Pixelhöhen" raus, was - man möge mich korrigieren- auch mit der Auflösung des Displays in dpi zusammenhängt.
Ich möchte ja nur wissen, on jemand meine Vermutung aus eigener Erfahrung bestätigen kann. Gibt soviele Threads zu "Mobile Layout" hier, dass muss doch schon jemand ausprobiert haben...
-
Wieso versuchst du krampfhaft absolute Maßeinheiten mit relativen Mitteln nachzubasteln? Was spricht gegen cm oder mm als Einheit?
Erstens hast du es selbst geschrieben
Die Empfehlung des w3 bezieht sich aber allgemein auf absolute Designs, wenn du also mit relativen Angaben versuchst absolute nachzubasteln, hast du nichts gewonnen. Du hast dich ja sowieso schon für ein absolutes Design entschieden, also hast du die Empfehlung schon zur Kenntnis genommen, dich aber bewusst trotzdem gegen die Umsetzung entschieden.
und zweitens haben meine Recherchen ergeben, das 10mm nicht 10mm sind, da sie eh von Browser umgerechnet werden, da kommen dann wieder unterschiedliche "Pixelhöhen" raus, was - man möge mich korrigieren- auch mit der Auflösung des Displays in dpi zusammenhängt.
Der Fehler bei der Umrechnung ist allerdings kalkuliert und näher wirst du deinem Wunsch-Ergebnis kaum kommen. Lies dir mal diese Spec dazu durch.
-
Der Fehler bei der Umrechnung ist allerdings kalkuliert und näher wirst du deinem Wunsch-Ergebnis kaum kommen. Lies dir mal diese Spec dazu durch.
Danke! :-)
-
-
-
-
Hi,
30px sollten auf jedem Gerät ungefähr gleich groß aussehen.
Ob sie gleich groß sind, hängt von der für das Gerät typischen Betrachtungsentfernung ab.
Da es sich bei all deinen Geräte um den gleichen (oder zumindest ähnlichen) Typen handelt, sind sie auch ungefähr gleich groß (und sehen nicht nur so aus).Evtl. solltest du lesen was man dir verlinkt, dann könntest du das auch selbst ausrechnen.
~dave
-
Da es sich bei all deinen Geräte um den gleichen (oder zumindest ähnlichen) Typen handelt, sind sie auch ungefähr gleich groß (und sehen nicht nur so aus).
Danke! :-)
-
-
Hallo!
Dave hat es ja schon angemerkt - du "verwechselst" hier zwei verschiedene Dinge. ;-)
'px' Angaben im Stylesheet sind immer CSS-Pixel, haben also nichts mit der jeweiligen Auflösung des Displays zu tun.wenn ich mit
<meta name = "viewport" content = "width=device-width, initial-scale=1.0"
einen 30px hohen Bereich definiere, hatt der "physikalisch" (beispielsweise) auf dem iPhone 4, iPhone 5, Samsung Galaxy S3, iPad 3, etc. überall ungefähr die gleiche Höhe? Hast du damit Erfahrungen?
Kurze Antwort: Nein!
Lange Antwort:
Du kannst dir deine Frage doch sehr leicht selber beantworten ..., wenn du bspw. einen Button von 30px X 30px definierst und dir das Resultat einmal auf einem 24" Monitor (1920 x 1068) und einmal auf einem Smartphone (480 x 800) anguckst, dann hat der Button "im Verhältnis" zu anderen Elementen auf der Seite dieselbe (relative) Größe. Wenn du ein Lineal dran hälst, natürlich nicht!Schon aus diesem Grund sollte dir eigentlich klar sein, warum du relative Größen benutzen solltest. Denn 5cm können relativ betrachtet allem möglichen entsprechen, also bspw. einer Breite von 10%, aber genausogut auch einer Breite von 100%, abhängig vom jeweiligen Display.
Hier ist noch ein Artikel, der sich mit dem Thema beschäftigt, um das es dir imo geht: Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
Und wenn du noch ein bisschen Mathe üben willst: Bildschirmdiagonale#Seitenlängen und Fläche
Wie Dave schon so passend angemerkt hat:"Evtl. solltest du lesen was man dir verlinkt, ..." ;-)
Gruß Gunther
-
Hier ist noch ein Artikel, der sich mit dem Thema beschäftigt, um das es dir imo geht: Finger-Friendly Design: Ideal Mobile Touchscreen Target Sizes
Danke! :-)
-
-
-