Wie, um das setup-HTML für mobile Geräte mit einem header-Bild, das nimmt die ganze Breite des browser?

meine Sorge ist, dass ich eine Webseite bauen, die für mobile Geräte. In das Konzept ist ein Bild festlegen, wie header.

Das problem ist nun: Andere smartphones haben unterschiedliche display-Auflösungen.

Gibt es z.B. 840x560, 480x320 oder 800x480.

Was muss ich schreiben, wie meta-tags, css, etc. passt das Bild in "jeder" modernen smartphone auf das display?

Ich hoffe mein Anliegen wurde klar beschrieben.

Dank, Chris

zu sehen, wie Sie möchten, reduzieren Sie die "Skalierung" (abgeleitet von deiner Reaktion auf @Vinzius), haben Sie einen Blick auf das edit auf meine Antwort, und zu beurteilen, ob @media queries helfen könnte.

InformationsquelleAutor ChrisBenyamin | 2010-10-04

Weil width: 100%; scheint gut unterstützt werden ich würde vorschlagen:

#header {
    width: 100%;
    padding: 0;
    margin: 0;
}
#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}


<div id="header">
    <img src="header.png" />
</div>

oder

#header img {
    width: 100%;
    padding: 0;
    border: 0;
    outline: 0;
}

<img src="header.png" />

Einstellung nur die width bedeutet, dass die Bild-Breite/Höhe-Verhältnis wird erhalten, indem der browser. Bedenken Sie jedoch, dass passing off Bildbearbeitung (Skalierung/Größenänderung) auf dem Handy-browser könnte dazu führen, die weniger-als ziemlich Artefakten eingeführt.

Haben Sie die Möglichkeit, verschiedene Größen der Bilder, die Sie rufen kann, auch diejenigen mit @media-queries:

<link rel="stylesheet" href="mobileStylesheet1.css" media="only screen and (max-device width:840px)"/>
<link rel="stylesheet" href="mobileStylesheet2.css" media="only screen and (max-device width:800px)"/>
<link rel="stylesheet" href="mobileStylesheet3.css" media="only screen and (max-device width:480px)"/>

Und in diesen stylesheets zu definieren:

mobileStylesheet1.css

#header {
background: transparent url(path/to/840pxImage.png) 0 50% no-repeat;
}

mobileStylesheet2.css

#header {
background: transparent url(path/to/800pxImage.png) 0 50% no-repeat;
}

mobileStylesheet3.css

#header {
background: transparent url(path/to/480pxImage.png) 0 50% no-repeat;
}

Das scheint wirklich das richtige zu tun
merci - der beste Weg zu gehen 😉
Il n ' Y a pas de quoi =)
Das war wirklich interessant.

InformationsquelleAutor David Thomas

4

Neben David Thomas' Antwort, Sie wahrscheinlich müssen setzen Sie den viewport meta-tag:
```
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
```
Im Hinterkopf behalten, dass es zusätzliche Eigenschaften, die insbesondere meta-tag, aber diese beiden sind wahrscheinlich die, die Sie brauchen.

Können Sie auch so breit wie ein pixel Wert. "device-width" legt im wesentlichen fest, die Breite des browser-Viewports die Breite des Telefons, das ist wahrscheinlich das, was Sie wollen. Danach, ein einfacher 100% der Breite auf, was auch immer element sollte damit es passt dem Handy genau. Kombinieren Sie diese mit David Thomas' @media-query-Antwort tatsächlich tauschen Sie Bilder, die genauer passen Sie das Telefon so nicht so viel skalieren beteiligt ist. Die meisten "modernen" mobile Browser unterstützen die viewport-meta-tag. (Es hängt wirklich davon ab, was deine definition von moderne smartphone ist.)

Siehe auch: width=device-width funktioniert nicht im Mobile IE

InformationsquelleAutor Nate Bundy
2

Denke ich die bessere Lösung ist, um ein Bild + header, die Hintergrundfarbe (oder-Bild-Muster).

Beispiel :
```
<div class="header">
  <img src="image.png">
</div>
```
Die Breite/Höhe des Bildes.png ist behoben und der header-Klasse hat so etwas wie :
```
.header {
  display:block;
  background-color:#;
  background:url("") repeat;
}
```
Dann sollte es passen alle Geräte. Aber wenn Sie wollen, etwas besser, vielleicht sollten Sie eine MVC-Modell und eine Ansicht für jedes Gerät (oder die meisten importants ^^)

Glück !

Nein, das ist nicht möglich. Es ist ein Bild, das hat zu passen.
Ok, aber es wird das Bild zu skalieren... also ich glaube nicht, dass es eine gute Lösung. Allerdings versuchen, eine width:100% auf das Bild oder irgendeine Art von JS-Skript zu identifizieren, die Bildschirm-Breite.

InformationsquelleAutor Vinzius
0

Identifizieren, die das Telefon von Agent-string und servieren verschiedene Bilder.

Ich habe nicht nach unten Stimmen, aber ich könnte mir vorstellen, dass es war, weil Sie empfohlen browser sniffing, das ist höchst fehlbar, da Browser nicht identifizieren, die sich konsequent und aktiv mis-identifizieren sich bei dem Benutzer' Geheiß. Objekt-Erkennung ist oft ein erfolgreicher Weg zur Erreichung der gleichen oder ähnlichem Ergebnis.
Danke @David Thomas.

InformationsquelleAutor Prof. Falken

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.