Breite Display Smartphone

[hawkmaster]

Hallo zusammen,

ich habe eine kleine WebApp gemacht (zum Einsteigen in jQuery)
Es wird unter anderem ein Kalender angezeigt (datetimepicker)
Dem Div Container habe ich eine Breite von 300px gegeben.
Im lokalen Firefox auf Windows sieht alles gut aus.
Auch wenn ich mit der WebDeveloper Toolbar die Anzeigegröße auf
480 x 800 px ändere hätte ich noch gut Platz.

Wenn ich das ganze jetzt auf einem Samsung Galaxy S2 anzeige das ja auch diese Display Größe hat, muss ich in der Breite schon ein wenig scrollen.

Ich verstehe nicht warum.
Eigentlich hätte es doch genug Platz?

vielen Dank und viele Grüße
hawk

[Gunther]

Hallo!

Ich verstehe nicht warum.

Ich auch nicht ...!

Eigentlich hätte es doch genug Platz?

Tja, mit dem "eigentlich" ist das halt immer so eine Sache! ;-)

Aber mal Spaß beiseite - wie bitte meinst du, dass dir hier jemand anhand der von dir bereitgestellten Informationen helfen kann/ soll?

Das fängt schon bei der Frage an, ob du bspw. den meta-viewport verwendest, oder nicht?
Und geht über deinen restlichen HTML Code, dein CSS und Javascript weiter.

Mit anderen Worten - ohne mehr (relevante) Informationen, keine (brauchbare) Hilfe.

Gruß Gunther

[hawkmaster]

Hallo Gunther

danke für deine Hilfe und sorry für die fehlende Infos.
Das war keine Absicht, sondern eher weil ich nicht weiss wie sich was auswirkt und ich mit WebApps für Mobilgeräte noch nicht viel gemacht habe.

Also im index.html habe ich:

<meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1"/>
<meta name="apple-mobile-web-app-capable" content="yes" />

Im CSS habe ich unter anderem:

body {
    font-family: sans-serif;
    overflow: hidden;
    background: url(../bilder/bghimmel4.jpg) no-repeat;
    background-size: 100% 100%;
}

#infocontainer {
  display:none;
  position: absolute;
    top: 40px;
    left: 0px; right: 0;
    padding: 8px;
    width: 300px;
}

Das Breitenproblem tritt auf wenn der "infocontainer " eingeblendet wird.
Drum herum gibt es keine CSS width Angaben.

Ich wollte eigentlich auch wissen, ob die 480px Breite des Samsung Handy identisch sind zum FF Browser auf einem Windows PC? Ich lese immer was von "Density" bei Mobil Displays.
Wenn ich nämlich im FF Developer Toolbar das ganze mit 480px anzeige, habe ich noch genügend Platz.

Gruss
hawk

[molily]

Hallo,

display:none;
  position: absolute;
    top: 40px;
    left: 0px; right: 0;
    padding: 8px;
    width: 300px;
}

Entweder du gibst left einschließlich right an oder du gibst width an. Beides ergibt keinen Sinn. Möglich wäre noch left + width.

left und right zu benutzen ist m.E. am besten, besser als eine feste Breite anzugeben.

Ich wollte eigentlich auch wissen, ob die 480px Breite des Samsung Handy identisch sind zum FF Browser auf einem Windows PC?

Galaxy S2 hat eine physikalische Auflösung von 480 x 800 Pixeln.
http://de.wikipedia.org/wiki/Samsung_Galaxy_S_II
Die ist für dein CSS aber irrelevant (zumindest bei width=device-width).

Galaxy S2 hat eine CSS-Viewport-Breite von 320px (CSS-Pixeln).
http://viewportsizes.com/?filter=galaxy s2
Diese ist maßgeblich beim Setzen von CSS-Werten mit der Einheit px.

Das heißt, die Device-Pixel-Rate ist 1.5.
http://bjango.com/articles/min-device-pixel-ratio/

Der Firefox ist ein Desktop-Browser. Das Verkleinern des Viewports mithilfe der Developer-Tools gibt nur ein ungefähres Bild davon, wie deine Seite auf echten Mobilbrowsern dargestellt wird. Die meisten Desktop-Rechner haben eine Device-Pixel-Rate von 1 und reagieren nicht auf <meta name="viewport">. Die Chrome-Developer-Tools erlauben hier schon eine bessere Emulation.
https://developers.google.com/chrome-developer-tools/docs/mobile-emulation

Ich lese immer was von "Density" bei Mobil Displays.

Das ist die o.g. Device-Pixel-Ratio.

Mathias

[hawkmaster]

Hallo Mathias,

ganz herzlichen Dank für deine Mühe und tolle Info.
Das hat mir jetzt etwas gebracht.
Es spielt also eigentlich der Viewport eine Rolle bei Mobilgeräten und nicht so sehr die physikalische Displaygröße.

Das mit den Chrome Tools ist ein guter Hinweis. Ich war bisher immer gewohnt mit Firebug, DeveloperToolbar und Co. zu arbeiten. Vielleicht sollte ich mehr mit Chrome entwickeln.

vielen Dank und viele Grüße
hawk

[Gunnar Bittersmann]

@@hawkmaster:

nuqneH

<meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1"/>

Das ist meist keine gute Idee. Lass den Nutzer skalieren, wenn es für ihn notwendig ist.

<meta name="viewport" content="width=device-width, initial-scale=1"/> und Hände weg von maximum-scale.

Qapla'

[hawkmaster]

Hallo Gunnar,

<meta name="viewport" content="width=device-width, initial-scale=1"/> und Hände weg von maximum-scale.

vielen Dank für deinen Hinweis.
Ich hatte mir das nicht ausgedacht. (habe ja noch keine große Erfahrung mit WebApps für Mobilgeräte)
Ich habe mir extra 2 Bücher gekauft. In diesen Büchern findet man in allen Beispielen diese Angaben.

Das scheint dann wohl nicht so recht zu stimmen was da steht.

vielen Dank und viele Grüße
hawk

[molily]

<meta name="viewport" content="width=device-width, initial-scale=1 , maximum-scale=1"/>

Das findet sich häufig, um die 300ms-Verzögerung bei Taps zu deaktivieren.

Das ist meist keine gute Idee. Lass den Nutzer skalieren, wenn es für ihn notwendig ist.

Siehe auch http://timkadlec.com/2013/11/Avoiding-the-300ms-click-delay-accessibly/

Mathias