webentwicklung-frage-antwort-db.com.de

Wie kann ich HTML-Seiten erstellen, die ihre Bilder automatisch an unterschiedliche Bildschirmgrößen für Mobilgeräte anpassen?

Ich möchte einige HTML-Seiten erstellen, die auf verschiedenen Mobilgeräten angezeigt werden. Ich möchte, dass sie sich automatisch an unterschiedliche Bildschirmgrößen für Mobilgeräte anpassen.

Die HTML-Seiten enthalten Text und Bilder. Die Bilder können größer als 600x450 sein, aber wenn der mobile Bildschirm (zum Beispiel) 280x320 ist, sollten die Bilder automatisch ihre Größe anpassen, um zu passen.

Wie kann ich das machen?

androidhtmlhtml5mobile
10
Ekky

Wenn die Seiten, von denen Sie sprechen, buchstäblich nur Text und Bilder enthalten, denke ich, dass Sie in jeder HTML-Seite Folgendes tun müssen:

  1. Fügen Sie dieses viewport-Meta-Tag im <head>-Tag hinzu:

    <meta name="viewport" content="width=device-width">

    Dadurch sollte die Seite in angemessener Größe dargestellt werden.

  2. Fügen Sie dieses <style>-Tag im <head>-Tag hinzu:

    <style>
img {
    max-width: 100%;
}
</style>

    Ich denke Dadurch wird sichergestellt, dass alle Bilder nicht breiter als der Ansichtsbereich der Webansicht der App dargestellt werden.

    (Wenn dies nicht funktioniert, versuchen Sie stattdessen width: 100%;. Dadurch werden alle Bilder auf jeden Fall so breit wie das Ansichtsfenster und daher nicht breiter.)

Ihre Frage ist jedoch etwas zu allgemein: Wir könnten am Ende ein Buch schreiben, das alle Möglichkeiten aufzeigt. Könnten Sie den Code, an dem Sie gerade arbeiten, genauer beschreiben?

12
Paul D. Waite

Diese Technik wird als flüssiges oder adaptives Layout bezeichnet. Es gibt eine gute Einführung hier

3
VahidNaderi

Medienabfragen sind der beste Weg, um das zu tun, was Sie möchten.

Richten Sie Ihre HTML-Datei und Ihr Stylesheet wie gewohnt ein, verwenden Sie jedoch am Ende Ihres CSS-Dokuments etwas, das dem folgenden Code ähnelt: Sie müssen die verschiedenen Abfragen für die verschiedenen Gerätbreiten und -layouts erarbeiten, dies sollte jedoch der Fall sein fangen Sie an.

/* iPHONE 3-4 + RETINA PORTRAIT STYLES */
@media only screen and (min-device-width: 320px) and (max-device-width: 480px) and (max-device-height: 480px) and (orientation:portrait) {
    /* Your adjusted CSS goes here */
}

/* iPHONE 3-4 + RETINA LANDSCAPE STYLES */
@media only screen and (max-device-width: 480px) and (min-device-width: 320px) and (max-device-height: 480px) and (orientation:landscape) {
    /* Your adjusted CSS goes here */
}
1
evilscary

Es gibt viele Optionen, von denen die meisten zu detailliert sind, um in einer einzigen Frage zu besprechen. 

Es gibt keine "automatische" Methode, es muss manuell codiert werden. Ich kann mir drei Optionen vorstellen, für die weitere Untersuchungen erforderlich sind:

  1. Verwenden Sie den User-Agent-HTTP-Header, um das anzuschließende Gerät zu identifizieren, und leiten Sie den Benutzer zur erforderlichen Website-Vorlage um.
  2. Verwenden Sie JavaScript, um dasselbe wie oben zu tun.
  3. Verwenden Sie CSS, um die Größe jedes Objekts zu steuern. Sie können festlegen, dass jedes Objekt einen bestimmten Prozentsatz der gesamten Bildschirmgröße hat und nicht einen festen Wert. CSS bietet auch eine Möglichkeit, Stile basierend auf einer bestimmten Bildschirmgröße anzugeben: http://www.w3.org/TR/css3-mediaqueries/
0
JAC2703

sie können die Medienabfrage verwenden, um Ihr Layout ansprechend zu gestalten, dh alle kleinen, mittleren und großen Bildschirme korrigieren. 

für weitere Informationen können Sie dieses Tutorial besuchen - responsives Design in einfachen Schritten lernen

0
samir panchal