flotschi301: Basisscript für Mobilanzeige

Ich suche ein Basisscript, wie ich eine Seite Formatieren muss, damit Sie auf mobilen Endgeräten direkt nutzbar ist - ohne erst zoomen zu müssen.
Ich habe trotz intensiver Suche bisher noch nicht herausgefunden, wie ich eine Homepage auf meinem Mobilgerät so angezeigt bekomme, dass sie direkt lesbar ist. Alle Seiten von mir sind immer in winzschrift.
Ich habe nun eine Homepage, die nur ich und auch nur auf dem HTC One X (Android) verwenden möchte.
Es geht mir hierbei noch nciht um die Erkennung, ob es sich um ein Mobilgerät handelt, oder um einen Desktop. Es geht mir nur darum, einmal zu sehen, wie die generellen Formatierungen für eine mobile Version sind. Für ein Fertiges Script oder hilfreiche Hinweise zum selberbasteln wäre ich dankbar. Bei fertigen Scripten wäre ich aber Danklbar, wenn auf jegliche spielerei verzichtet wird und nur das gezeigt wird, was tatsächlich benötigt wird.

  1. Ich suche ein Basisscript, wie ich eine Seite Formatieren muss, damit Sie auf mobilen Endgeräten direkt nutzbar ist - ohne erst zoomen zu müssen.
    Ich habe trotz intensiver Suche bisher noch nicht herausgefunden, wie ich eine Homepage auf meinem Mobilgerät so angezeigt bekomme, dass sie direkt lesbar ist. Alle Seiten von mir sind immer in winzschrift.

    Das Problem hatte ich auch als ich das erste mal mein Responsive Design auf 'nem Android Emulator betrachtet hatte. Du musst den Viewport entsprechend anpassen. Das MDN hat dazu einen super Artikel https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag.
    Direkt ein vorgefertigtes Script wirst du nicht finden, da das - je nach Layout - anders aussehen würde.

    Ich hoffe der Link hilft dir trotzdem. Ansonsten befrag eine Suchmaschine deiner Wahl mit Stichworten wie html meta viewport u.a.

    MfG
    bubble

    --
    If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
    1. @@bubble:

      nuqneH

      Das MDN hat dazu einen super Artikel https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag.

      Ich weiß nicht, was daran super sein soll. Viewport auf eine bestimmte Pixelbreite zu setzen ist nicht das, was man im Allgemeinen tun will. Und für den Nutzer das Zoomen zu verbieten, ist gar keine gute Idee.

      Qapla'

      --
      „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
      1. @@bubble:

        nuqneH

        Das MDN hat dazu einen super Artikel https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag.
        Ich weiß nicht, was daran super sein soll. Viewport auf eine bestimmte Pixelbreite zu setzen ist nicht das, was man im Allgemeinen tun will. Und für den Nutzer das Zoomen zu verbieten, ist gar keine gute Idee.

        Seh ich auch so, der Fall tritt aber auch nur auf wenn man stur c&p verwendet anstatt sich den Artikel durchzulesen.

        Und <meta name="viewport" content="width=device-width, initial-scale=1"> empfiehlst du doch selbst in deiner Antwort.

        Allerdings geh ich mich nun in einer Ecke schämen, da mir die CSS-Variante bis dato unbekannt war und ich nicht mal auf die Idee kam nach der gleichen zu suchen, als ich auf die HTML-Lösung kam.

        MfG
        bubble

        --
        If "god" had intended us to drink beer, he would have given us stomachs. - David Daye
    2. Danke bubble, das hat schonmal super geholfen. ich schau mal, dass ich meine Seiten daran angepasst bekomme.
      nice greets flotschi

      Ich suche ein Basisscript, wie ich eine Seite Formatieren muss, damit Sie auf mobilen Endgeräten direkt nutzbar ist - ohne erst zoomen zu müssen.
      Ich habe trotz intensiver Suche bisher noch nicht herausgefunden, wie ich eine Homepage auf meinem Mobilgerät so angezeigt bekomme, dass sie direkt lesbar ist. Alle Seiten von mir sind immer in winzschrift.
      Das Problem hatte ich auch als ich das erste mal mein Responsive Design auf 'nem Android Emulator betrachtet hatte. Du musst den Viewport entsprechend anpassen. Das MDN hat dazu einen super Artikel https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag.
      Direkt ein vorgefertigtes Script wirst du nicht finden, da das - je nach Layout - anders aussehen würde.

      Ich hoffe der Link hilft dir trotzdem. Ansonsten befrag eine Suchmaschine deiner Wahl mit Stichworten wie html meta viewport u.a.

      MfG
      bubble

      1. @@flotschi301:

        nuqneH

        Danke bubble, das hat schonmal super geholfen.

        Glaub ich nicht. Lass den Quatsch. Mach’s richtig.

        Qapla'

        --
        „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)
  2. @@flotschi301:

    nuqneH

    Ich suche ein Basisscript, wie ich eine Seite Formatieren muss, damit Sie auf mobilen Endgeräten direkt nutzbar ist - ohne erst zoomen zu müssen.

    Script??

    In dem von dir gewählten Themenbereich CSS wäre die Antwort
    @viewport { width: device-width }
    Einige Browser unterstützen das bereits mit Präfix.

    Um das von dir gewünschte Verhalten zu erzielen, schreibst du im HTML in den head:
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>

    Qapla'

    --
    „Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)