wake-up-neo.com

Welche Größe sollten meine Bilder für eine mobile Website haben?

Wir entwerfen eine Vorlage für eine mobile Website und sind zu dem Problem gekommen, bei dem wir nicht wissen, welche Größe ein Logo haben soll, oder welchen Hintergrund es haben soll.

Wir werden die mobile API von Jquery und HTML5/CSS3 verwenden, die es uns ermöglicht, die gesamte Architektur der Website zu erstellen, ohne sich um die Dimensionen Gedanken zu machen. In Bezug auf externe Assets wie Hintergründe und Bilder wissen wir jedoch nicht, welche Größe die beste ist um mit den meisten Geräten kompatibel zu sein.

9
multimediaxp

Das iPhone 4S/5 verfügt über ein hochauflösendes Display mit einer Breite von 640 Pixeln. Viele Android-Smartphones sind 720px breit, einige sogar bis 800px. Alles darüber wird wahrscheinlich als Tablette betrachtet.

Das Beste, was Sie für weitreichende Kompatibilität tun können, ist ein einzelner CSS-Stil:

img { max-width: 100%; height: auto; }

Dadurch wird sichergestellt, dass unabhängig von der Auflösung des Bildschirms Ihre Bilder nicht größer als das Element sind, in dem sich der Bildschirm befindet. (Wenn Sie eine responsive Site mit Blick auf mobile Benutzer erstellen, sollten Ihre Elementbreiten, -ränder und -auffüllung, sofern möglich, als Prozentsätze berechnet werden.) Natürlich bedeutet das auch, dass Sie mehr Bilddaten herunterladen, als viele Telefone benötigen, aber wenn Sie dies tun Bei zweifarbigen Logos handelt es sich nicht wirklich um einen Unterschied. Halten Sie Ihre Bilder wie immer so wenig und so klein wie möglich.

Wenn Sie sich nicht mit Fotos beschäftigen, sollten Sie außerdem SVG-Bilder betrachten. Da sie vektorbasiert sind, passen sie ihre Größe bei jeder Auflösung perfekt und sie sind mit fast jedem Browser außer IE8 und Android 2.x kompatibel. 

12
Blazemonger

Ich bin sicher, dass die Bildgröße normalerweise nicht mehr so ​​sein sollte, als würde sie den Standard für CSS-Abfragen definieren.

Dies ist eine kurze Liste der CSS-Medienabfragen für die beliebtesten Geräte des Zeitraums 2015-2016.

Fügen Sie der Liste einfach Medienquieres für neue Geräte hinzu, wenn Sie dies benötigen. 

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/**********
iPad 3
**********/
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}
/* Desktops and laptops ----------- */
@media only screen  and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen  and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : landscape) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio : 2) {
/* Styles */
}

/* iPhone 5 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 568px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6 ----------- */
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* iPhone 6+ ----------- */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S3 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 2){
/* Styles */
}

/* Samsung Galaxy S4 ----------- */
@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 320px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

/* Samsung Galaxy S5 ----------- */
@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : landscape) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

@media only screen and (min-device-width: 360px) and (max-device-height: 640px) and (orientation : portrait) and (-webkit-device-pixel-ratio: 3){
/* Styles */
}

Und werfen Sie auch einen Blick auf die älteren Listen https://css-tricks.com/snippets/css/media-queries-for-standard-devices/ und https://Gist.github.com/ hs0ucy/3762901

Betrachten Sie den folgenden HTML-Code:

<img src="images/myimage.jpg" alt="image">

Wenn Sie sich dieses Beispiel ansehen, benötigen wir je nach Bildschirmgröße mehrere Bilder. Da die meisten Browser das HTML-Dokument zuerst betrachten und Bilder vorher laden, bevor sie Javascript laden, wäre Javascript nicht die perfekte Lösung.

Deshalb: einen responsive Image Server verwenden!

Ich habeSencha.io Srcverwendet, um den Bildschirm des Geräts herauszufinden und das Bild zu verkleinern (es nur verkleinert) seine Bildschirmgrößenbeschränkungen. Sencha.io verwendet die Useragent-Zeichenfolge des Browsers, um das Gerät in seiner Datenbank nachzuschlagen. Dann verkleinert es Ihr Bild auf die maximale Breite Ihres Geräts und speichert es in einem Cache, der 30 Minuten lang verfügbar ist.

Verwenden Sie es so:

<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image">

PS: Es hat auch Nachteile: Es hängt von der Geräteerkennung ab und Sie müssen alle Ihre Bilder durch einen Dritten leiten. Da es sich derzeit jedoch nicht um großartige Lösungen handelt (selbst bei Medienabfragen müssen Sie sich mit Browsern befassen, die Ressourcen in einer Medienabfrage herunterladen, die nicht zutrifft). Ich hoffe, dass Ihnen dies helfen wird!

1
Chris Conway

Sie müssen dazu CSS-Medienabfragen verwenden. Sehen Sie sich diesen Artikel hier an: http://davidwalsh.name/image-max-width

/* iphone */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
      img { max-width: 100%; }
}

/* ipad */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
      img { max-width: 100%; }
}
0