Welche Größe sollten meine Bilder sein, für eine mobile Website

Entwerfen wir eine Vorlage für eine mobile Website und wir haben das problem, wo wir nicht wissen, welche Größe ein logo sein sollte, oder der hintergrund, usw.

Verwenden wir die Jquery mobile-API und HTML5 /CSS3, die im Grunde ermöglicht uns, erstellen die gesamte Architektur der Website, ohne sich Gedanken über die Dimensionen, sondern in Bezug auf externe Ressourcen, wie Hintergründe und Bilder wissen wir nicht, was ist die beste Größe, um mehr als mit den meisten Geräten kompatibel.

die meisten Bilder werden nie wirklich höher als 500 Pixel, es sei denn, Sie sind ein hintergrund Bild, so sollten Sie keine Schwierigkeiten haben zu schreiben, eine media-query basieren auf Geräten, die 480px Breite verkleinert das Bild so, dass es 250px statt 500 Pixel.

InformationsquelleAutor multimediaxp | 2012-10-11

12

Dem iPhone 4S/5 hat einen Bildschirm mit hoher Auflösung, die 640 Pixel breit. Viele Android-smartphones oben auf 720px breit, obwohl einige gehen bis zu 800px. Etwas über diese ist wohl auch als ein tablet.

Die beste Sache, die Sie tun können, wie weit, wie weit die Kompatibilität, dann ist eine einzige CSS-Stil:
```
img { max-width: 100%; height: auto; }
```
Dadurch wird sichergestellt, dass, egal welche Auflösung der Bildschirm ist, werden Ihre Bilder nicht größer als das element enthalten. (Beim Aufbau einer responsive Website mit mobilen Anwender im Auge, Ihr element Breite, margins und padding sollten alle berechnet werden als Prozentsätze, Wann immer möglich.) Natürlich bedeutet es auch, die Sie herunterladen, mehr Bildinformation als viele Handys brauchen, aber wenn man sich mit zwei-Farben-logos, es ist nicht viel Unterschied. Wie immer, halten Sie Ihre Bilder, so wenige und so klein wie möglich.

Zusätzlich, wenn Sie nicht den Umgang mit Fotos, sollten Sie sich bei SVG-Bildern. Da Sie Vektor-basierte, diese Größe perfekt in jeder Auflösung, und Sie sind kompatibel mit so ziemlich jedem browser ausser IE8 und Android 2.x.
- Ich habe versucht, aber immer, wenn das mobile Gerät (in diesem Fall das iphone), wird es umgedreht, von vertikalen zu horizontalen, das Bild wird größer, statt die Anpassung zu den neuen Prozentsatz je nach Gerät ist die Breite
- Das ist ein separates problem, dann. Verschiedene <meta> - tags existieren, um dieses Problem Herangehen.
- Haben Sie eine Referenz zu suchen, in dieser meta-tags? Dank
- Sie könnte beginnen, hier
- Das hat mir geholfen. Sie sir sind ein Gelehrter!
InformationsquelleAutor Blazemonger

Ich bin sicher, dass die Bild-Größe sollte normalerweise nicht mehr wie es definiert CSS-media-query-standart.

Dies ist eine kurze Liste von CSS-media-query für die beliebtesten Geräte von 2015-2016.

Fügen Sie einfach in dieser Liste Medien quieres für neue Geräte, wenn Sie brauchen.

/* 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

InformationsquelleAutor Developer

1

Betrachten Sie folgenden html-code:
```
<img src="images/myimage.jpg" alt="image">
```
Sich ein Blick auf das Beispiel, wir müssten mehrere Bilder je nach Bildschirmgröße. Da die meisten Browser auf der HTML-Dokument und Bilder vorab laden, bevor Sie das laden von Javascript, Javascript-wäre das nicht eine perfekte Lösung zu sein.

Deshalb: Verwendung eines responsive-image-server!

Ich verwendet habe,Sencha.io Src, die Figur aus dem Bildschirm des Geräts und schrumpfen (es nur schrumpft images) Sie Ihr image, um seine screensize Einschränkungen. Sencha.io nutzt der Browser useragent-string zu suchen, bis das Gerät in der Datenbank. Als es schrumpft Ihr Bild auf die maximale Breite von Ihrem Gerät und speichert diese in einem cache, die verfügbar sein wird für 30 Minuten.

Wie das verwenden:
```
<img src="http://src.sencha.io./http://[your domain and path]/images/myimage.jpg" alt="image">
```
PS: Es hat auch shortcomes: es stützt sich auf device-Erkennung und benötigt für die Weiterleitung aller Ihrer Bilder durch Dritte. Da Sie aber keine großen Lösungen, die im moment (noch mit media-queries müssen Sie befassen sich mit Browser, die download-Ressourcen innerhalb einer media query das nicht gelten) - ich hoffe, das wird Ihnen helfen, aus!
- Ich bin mir nicht sicher, ob Sencha.io Src ist immer noch unterstützt. Der link in dieser Antwort (ja, die Antwort ist fast 3 Jahre alt) gibt eine übersicht der Sencha-Plattform. Hier ist ein link zu Sencha src-1: docs.sencha.com/src/1/#!/guide/using_src_io
InformationsquelleAutor Chris Conway

Haben Sie den Einsatz von CSS media queries für diese.
Werfen Sie einen Blick von diesem Artikel hier: 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%; }
}

was ist mit anderen Geräten?

InformationsquelleAutor John Skoumbourdis

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.