Frage von FlugzeugAUT, 88

Pixel - Bildschirmgröße richtige Darstellung?

Ich versuche jetzt noch einmal, nachdem ich jedes mal eine nicht zufriedenstellende Antwort bekommen habe hier mein Anliegen zu schildern...

Ein PC Monitor hat (sag ich jetzt einmal als Beispiel meinen, eine Pixelanzahl von 1300 px in der Länge gut) Ein Handy kann dieselbe Auflöung haben, aber anstatt einer Länge von 33 cm, nur eine von 5,5 cm. Gut.. bevor mir jetzt wer antwortet (schon langsam regt es mich auf) google Responsive Website eine kleine Gegenfrage was hilft es mir Bilder auf Pixel abzustimmen (zB mit @Media Screen) wenn ich das nur auf einem Monitor mache.. Ich bin wirklich und das nimmt auf jeden Fall den ganzen Spaß, am Verzweifeln. Gibt es denn keine Mögilchkeit mobile Geräte extern zu programmieren, dass kann doch so nicht funktionieren. Ist doch klar, dass ich bei einem Smartphone, dass 1300px in der Länge hat nicht das Bild auf 700 px (wie vielleicht am PC Monitor, weil groß genug) sondern so, dass es in der Breite 100% hat.. Wie arbeiten Seiten wie Facebook? Webansicht mit Media Screen oder womit?

Mit freundlichen Grüßen :/ (Hoffe es versteht jeder was ich meine, ein kleine Beifügung noch zur besseren Anschauung.. Stimmt es dass dann, wenn ein Handy -momentan noch nicht gegegen aber, wenn - mit einer theoretischen Pixelanzahl in der Breite von 4000px -mit 6cm Bildschirmbreite- und als krasser Kontrast ein Fernseher mit -untertrieben- 720 px in der Breite, dann bei einem Header, den ich programmiere mit Notepad++ und mit einer Höhe von 200 px, den Viertel Fernseher bedecken, und beim Handy, gerademal zwanzigstel??)

Antwort
von kohoki666, 44

Ich glaube die Meisten hier und auch ich, verstehen deine Frage nicht. Was willst du denn genau machen ? Etwas für ein Smartphone ? Da verstehe ich das Problem nicht. Wenn es für ein bestimmtes Modell sein soll, dann brauchst du, um Beste Qualität zu erlangen genau die Auflösung für ein Bild welches das Smartphonedisplay bietet. Wie das am Pc aussieht ist doch schnurz. Es zählt nur die absolute Größe, in der du es dann abspeicherst. Alles andere ist relativ und kann skaliert werden wie gebraucht. Für den Druck oder Layoutprogramme ist auch die absolute und relative Pixeldichte wichtig. Google mal ppi und dpi. 

Deine Beifügung zur Besseren Anschauung verstehe ich gar nicht mehr. Du wechselst munter verschiedene "Breiten" machst dann Höhenangaben aber ohne vorher die Höhe der Displays irgendwie zu beschreiben. Keine Werte und keine Seitenverhältnisse. Da kann dir keiner sagen wieviel du dann von dem Screen in Anspruch nimmst.

Kommentar von FlugzeugAUT ,

Das ist ja das Problem ich weiß nicht, was ich machen soll, bzw was ich verwenden soll, um die Anpassung auf jedes Gerät zu gewährleisten.

Ich weiß momentan nur, dass ich mit Media screen (also Responsive Webdesign) verschiedene Bildschirmauflösungen anpassen kann.

Gut.. und da hört mein Verständnis auf..

Ich kann doch nicht für ein Smartphone, mit einer Pixelanzahl von 1400 das gleiche Layout verwenden, wie für einen Laptop (der auch 1400 px in der Breite hat) - ich denke, dass Responsive Webdesign schon ein wenig veraltet ist, da kein Handy mehr 240 px, kein Tablet mehr 480 px und die meisten Desktop PC's mehr als 1024px hat. Somit ist deren Beschreibung, ein flexibles Layout durch verschiedene Pixelauflösung zu haben einfach nur unverständlich.

Es tut mir leid, dass es schwer ist zu verstehen, aber ich bin mittlerweile schon ein wenig sauer und wenn man das Problem nicht hat, dann versteht man es auch nicht :/

Antwort
von enofish, 36

Wenn ich deine Frage richtig verstehe, möchtest du wissen wie man Bildschirme gut vergleichen kann, wenn diese eine ähnliche/gleiche Auflösung, jedoch völlig verschiedene Größen haben. 

Für solch einen Vergleich gibt es die Einheit PPI (pixels per inch oder auch Pixeldichte) welche gut aufzeigt wie detailliert die Darstellung eines Bildschirmes ist. Denn es werden eben die beiden Faktoren Auflösung und Diagonale kombiniert.

Nehmen wir z.B. Full HD bei 1920x1080 pixel

Bei einer Displaygröße eines Smartphones von z.B. 5,4 Zoll ergibt dies eine Pixeldichte von 408 PPI

Bei einem PC Monitor von 27 Zoll nur noch 82 PPI

und wenn wir nun einen Fernseher mit etwa 50 Zoll nur noch 44 PPI

Wichtig ist dabei jedoch auch der Blickabstand zu betrachten. Denn wenn man sich die drei Beispiele ansieht nimmt mit sinkender Pixeldichte der übliche Sitzabstand zu - wodurch keine so hohe Pixeldichte nötig ist.


Ich hoffe das hat deiner Fragenstellung entsprochen :)

Kommentar von FlugzeugAUT ,

Ja ich denke, dass ich mich einfach eine zeitlang damit beschäftigen muss, es ist nicht leicht zu verstehen, und ja deine Antwort hat meiner Frage entsprochen :)

Wie man dieses ppi (dpi) dann demenstprechend einbindet (wo man doch mit height px und width px arbeitet) ist für mich auch noch unverständlich, aber ich hoffe wie gesagt, alles passende im Internet zu finden.

btw: hast du auch schon eine Webseite gemacht? (weil du sich so gut auskennst? :D) Ist Notepad++ überhaupt der ideale Editor, oder gäbe es etwas besseres? (und nun zur letzten kleinen Frage, wie werden Seiten wei Facebook geschrieben? Aus Html, so habe ich es zumindest verstanden, besteht jede Webseite. Ich habe nur das Gefühl, das viele nicht mit CSS gebaut sind.... )

Antwort
von perhp, 22

Mit CSS gibst du nur an, wie groß dein Bild dargestellt werden soll auf der Seite. Natürlich hat es keinen Sinn ein 1920px Bild beim Handy reinzuladen, dass nur eine Bildschirmbreite von ca. 350px hat.

Dafür gibt es sogenannte picturefill-Elemente, wo du die Größe des Bildes je nach Breite des Bildschirms abstimmen kannst, umso schneller wird dann auch die Seite geladen.

Natürlich bringt dir diese Methode nichts, wenn dein Bild nicht groß genug ist. Du musst ein Bild verwenden, dass groß genug ist und für jedem Bildschirm optimal ist, und anschließend renderst du es korrekt für jedes Gerät.

<picture>
<source media="(min-width: 38em)" srcset="art-direction-horizontal.jpg">
<source srcset="art-direction-vertical.jpg">
<img src="art-direction-vertical.jpg" alt="">
</picture>
Kommentar von FlugzeugAUT ,

Danke erstmal, leider verstehe ich den Code nicht so ganz bzw die Logik dahinter ich denke ich sollte mich einfach sehr stark damit beschäftigen, dann kann sogar ich das schaffen :D

Kommentar von perhp ,

Sieh dir mal das dazu an: https://liechtenecker.at/das-picture-element/

Hier steht dann auch noch weiter unten, wie man das anwendet: http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-html5-picture-for-r...

Antwort
von Wynand14, 18

Also: Ich habe gerade Zeit und möchte einmal versuchen aus deinem Text eine Frage zu interpretieren. 

Es gibt dann für mich zwei Möglichkeiten: 

1. Wie kann eine z.B. Webseite für verschiedene Auflösungen gemacht sein, existiert dann für jede Auflösung eine extra Seite?

2. Wie kann auf einem Handydisplay dieselbe Auflösung sein wie auf einem z.B. PC und es wird trotzdem anders dargestellt, bzw. wie kann es dargestellt werden?

Dann hier zu den Lösungen:

1. Eine Webseite, oder auch ein Programm kann so programmiert sein, dass es die Bildschirmgröße automatisch erkennt und die z.B. Buttons oder Felder dementsprechend anpasst. Z.B. ist dann ein Rand 5% der Bildschirmbreite oder ein Button entspricht 10% der Höhe, etc. So sieht die Seite auf allen Größen/Bildschirmen gleich aus. Das hat dann aber den Nachteil, dass z.B. auf Handydisplays die Buttons kleiner werden, bei gleicher Auflösung wie z.B. ein PC-Monitor, da dort dann die Pixel natürlich auf größerem Raum sind. D.h, es gibt nicht eine extra Seite für jede Auflösung.

2. Die gleiche Auflösung auf einem kleineren Display bedeutet eine höhere Dichte per cm an Bildpunkten, also Pixeln. Die Seite wird dann je nach Größe des Displays ausgerichtet. Bei Handys gibt es, damit die Seite dann eben nicht winzig ist, dafür das (und das hast du ja selber gesagt) "responsive Design".

Ich hoffe ich konnte ein wenig helfen, ansonsten würde ich Dir raten, dass Du Dir mal ein bisschen mehr Mühe gibst beim Schreiben und auch so schreibst, dass man es nachvollziehen kann.

MfG

Antwort
von abbrechen, 13

Wenn ich es richtig verstehe, möchtest du die Handydarstellung gesondert behandeln, statt nur den Inhalt nah Bildschirmbreite anpassen zu wollen?

Dann anstatt responsive suchst du "Adaptives Webdesign".
Responsive = Webseite verändert sich je nach Bildschirmbreite
Adaptiv = Wenseite schaut, welches Gerät benutzt wird und lädt den für das Gerät gesetzten Content.

Und Bilderskalierung geht über height.

Kommentar von FlugzeugAUT ,

Ist eine kompakte Antwort, die mir zu den anderen Antworten sehr weitergeholfen hat. Danke :) 

Kommentar von FlugzeugAUT ,

Was ich noch hinzufügen möchte und ich überhaupt nicht verstehe.. was ist dann im endeffekt responsive webdesign? mit media screen und pixel arbeiten ist responsive? wenn ich aber adaptiv suche steht da überall nur adaptiv vs responsive.. abgesehen davon dass es keinen vergleich gibt, da das mit den gleichen pixel bei komplett unterschiedlichen bildschirmen gegen ist würde ich einfach gerne wissen wie man denn responsive und adaptiv einbindet. :/ sorry aber ist für mich alles noch ein wenig unverständlich bin aber froh, dass es hier viele hilfsbereite leute wie dich gibt:)

Mfg

Kommentar von abbrechen ,

Hier mal ein Artikel zum Unterschied. http://www.wompmobile.com/blog/mobile-must-have-javascript-adaptive-design/

In der Praxis ist adaptives Design, dass wenn du mit dem Handy auf eine Webseite gehst, du auf mobile.webseite.de weitergeleitet wirst. Je nach Gerät möchte man dem Anwender auch unterschiedlich viel Inhalt zeigen. Das extremste Beispiel ist wohl der Unterschied zwischen einer App und einer Webseite. Die App hat reduzierten Inhalt und die Webseite ist oft vollkommen überladen.

Wobei man bei "adaptive Design" aufpassen musst. Es scheint kein Einheitsbegriff zu sein und du wirst auch Vianten (wie mit der Adapt.js) finden, bei dem die Javascript dabei schaut, welche Maße das Gerät hat und in Abstufungen den Inhalt darstellt. Also 0 bis 780px = mobile.css verwenden, 780px bis 1200px = tablet.css verwenden, usw. Statt also z.B. bei mobile eine Subdomain zu verwenden (mobile.webseite.de) werden einfach unterschiedliche Files geladen, in diesem Fall css Files. Das Problem dabei ist, finde ich, dass es mit css recht unhandlich ist, Inhalte auszublenden und durch andere zu ersetzen.

Für Bilder macht das allerdings keinen Unterschied, ob responsive oder adaptiv. Man stelle sich responsive vor: Man skaliert den Bildschirm und das Bild skaliert mit. Bei den Breakpoints der media queries verschiebt sich zwar der Inhalt oder nimmt andere Größen an, das Bild bleibt, sofern natürlich nicht in den css verändert, unabgetastet. Da Bilder in Prozente skalieren, gibt es keinen Grund sie in den media queries anzusprechen. In adaptiv genauso.

Es gibt verschiedene Arten media queries (responsive Design) zu schreiben. Manche Browser erkennen manche Schreibweise nicht, wie mir aufgefallen ist.

Ich würde folgende nehmen: @media screen and (min-width: 480px)

Und so geht es dann auch:

@media screen and (min-width: 480px) {

/* hier kannst du dein css verändern */

}

weiterführende Info: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Diese seltsame Variante mit dem Laden von verschiedenen css files findest du hier: http://adapt.960.gs/

Und das adaptive Design was ich meinte, mit der Subdomain, ist hier erklärt: http://www.ehow.com/how_12161779_make-m-subdomain-mobile-websites.html

Antwort
von RakonDark, 19

Was dein Problem ist ,

Du arbeitest nicht responsive .

Responsive gesehen hat dein Display aufm Händy 600px breite .

Machst du natürlich eine Seite die z.b. 1024 Pixel Breite hat , und schaust sie dir Hochkant an , dann hast Du dein beschriebenen Effekt .

Machst Du aber deine Seite auf 600px Breite , so hast Du eine ganz normale Darstellung im Verhältnis .

Was völliger Unsinn ist und was aber in deinem Flatscreenkopf noch Drinne ist , das du meinst Du müsstest die Bilder größer machen damit sie dann auch auf dem anderen Display groß Dargestellt werden .

Das ist aber gar nicht der Fall . Im zweifel Zoomt das Display unzwar so das die Ansicht groß genug ist . Es reicht also das Layout mit CSS entsprechend anzupassen . Dann sind die Bilder auch schön groß  . Wenn Du das nicht machst dann hast Du halt im verhältnis genau den gleichen Großenunterschied wie am FLATSCREEN , aber eben auf kleinere Maße .

Also wenn mein Flatscreen ein Din A4 ist , dann sind meine 2 bilder nebeneinander Din A5 .

Wenn aber mein Screen eh schon Din A6 ist dann werden es natürlich nur Din A7 Bilder , aber sie füllen immer noch die Hälfte der Fläche .

Das einzige was da Hilft ist halt die Breite so einzustellen das es eben nicht die volle Pixelzahl der Screenauflösung nimmt, sondern gleich kleiner und damit den Zoom im Händy aktiviert der das dann auf die volle Breite Zoomt.

Es ist also überhaupt kein "wie groß mach ich die Bilder" Problem , sondern wie verkleinere ich mein Enviroment drum herum .

Ich werde gleich noch gerne mal eine Demo machen , damit Du begreifst das das selbe Bild durchaus auf den verschiedenen Screens die gleiche Dimension hat .

Kommentar von FlugzeugAUT ,

Danke einmal für deine Antwort :) Es ist so schwer zu verstehen, das kannst du mir glauben :/ Bilder werden immer größtmöglich automatisch skaliert, nur andere Inhalte muss ich dementsprechend anpassen?

Ich glaube eines meiner größten Probleme ist auch die horizontale Navigation, die am Handy nie funktionieren würde :/

Ja bitte erstelle eine Demo, vielleicht hilft es ja :/

Zum kurzen Verständnis, werden zB auch Navigationen mit einer Höhe von 45px auf einen Bildschirm skaliert? Ich muss nur immer nach den verschiedenen Auflösungen anpassen?

Antwort
von ShitzOvran, 19

Google mal nach "User Agent" und in dem Zusammenhang auch "Media Queries" bzw "Breakpoints".

Antwort
von wwwnutzer111, 34

Jetzt hast du soviel geschrieben wie du es nicht haben willst das nicht mehr wirklich klar wird was du für eine Frage beantwortet haben willst.

Kommentar von FlugzeugAUT ,

Ja, weil ich das Problem einfach schildern wollte, genauso wie es mich aufregt :) Ich Prinzip einfach folgendes.. bei Internetseiten mit Media Screen{} arbeiten, aber wie erkennt die Homepage den Unterschied zwischen mobilen Geräten (Tablet, Handys) und Computern? Denn wie gesagt 700 px auf einem Handy und 700 px auf einem Fernseher sind ein "kleiner" Unterschied...

Kommentar von wwwnutzer111 ,

Also die Bildschirmgröße ist wenn man von Pixeln spricht irrelevant. Punkt das ist so und es bleibt so. Die Auflösung ist es die hier den entscheidende Komponente. Das Problem wie du es schilderst wird von der Hardware geregelt. Das heißt das Bild wird je nach Pixeldichte hoch oder herunter skaliert. 

Ich hoffe das ist die Antwort die du hören willst, wenn nicht kannst du ruhig meckern^^

Antwort
von Andyplayer1, 31

Man erkennt nicht wirklich deine Frage...

Kommentar von FlugzeugAUT ,

Sorry ja ist echt nicht schlau ausgedrückt...

Ich verstehe nicht wie man Pixel mit der Bildschirmgröße in Kombination setzen kann? (da man es ja praktisch muss)

Wie schon bei dem anderen Kommentar erwähnt, sind 700px auf einem Smartphone etwas ganz anderes als 700px auf einem Computer. Da ist es zB logisch, dass ich ein Bild auf der vollen Breite will, da ein Bild mit 2,5 cm schon ein wenig klein wäre.

Hat man aber jetzt einen Laptop Bildschirm mit der gleichen Auflösung sind 700px mehr als genug für ein Bild. Also irgendwie muss es da eine Logik dahinter geben, auf die ich, seit ich wirklich mit viel Anstrengung versuche zu programmieren, nicht draufgekommen bin :(

Keine passende Antwort gefunden?

Fragen Sie die Community