(Link-Tip:)
PPK (Peter-Paul Koch) - u.a. JavaScript Experte und gerade für Vodafone im Bereich Mobile Web am forschen - schreibt ganz nett über seine Meinung zum Testing von Apps/Websites in mobilen Endgeräten, daher hier der Link zu seinem Artikel mit dem sehr aussagekräftigen Titel “Testing mobile phones, or the masochist’s guide to gleeful self-flagellation“: http://www.quirksmode.org/blog/archives/2009/09/testing_mobile_2.html
Das Testen von Websites ist zwar viel(!) umfangreicher als das Testen von Desktop-Applikationen, aber andererseits sind auch durchaus interessanter, weil es natürlich um viel mehr geht als darum, ob eine Site im IE6 der des Safari4 möglichst ähnlich ist (und das wieder massiv zunehmende Scripting auch überall funktioniert).
Im letzten Projekt ist mir aufgefallen, daß der Netfront Browser - der Standardbrowser z.B. auf den meisten Sony Ericsson Handys - sehr große CSS-Hintergrundbilder verkleinert. Das habe ich mit 2 verschiedenen Geräten sehen können, und es hat anscheinend nichts mit dem Carrier (O2) zu tun, andere Geräte zeigen das Verhalten über O2 nämlich nicht.
Ergebnis: Das background-image sollte nicht größer als ca. 320 x 240 Pixel sein…
Eine explizit für mobile Geräte (also “Handys”) optimierte Website sollte unbedingt den “viewport meta tag” mitbringen. In manchen mobilen Browsern, z.B. im Opera-Mobile, wäre sonst die ganze Mühe umsonst gewesen. Der Opera-Mobile (und auch andere) versucht sonst selber, die Seite “mobil-freundlich” darzustellen…
Hinweis: Der Artikel wurde überarbeitet und ist nun hier zu finden:
Wozu der viewport meta tag?
Web-Entwicklung für Nokia S60-Series
Immer wieder fällt mir beim entwickeln von mobile-sites bzw. beim rumsurfen mit Nokia S60 Geräten (z.B. nativer Browser des E65) ein unnötiger horizontaler Scrollbalken auf, der lediglich ca. 5px scrollen nach rechts zulässt und dabei aber nichts neues anzeigt.
Der Grund ist offenbar das styling von margin/padding sowie die Breite (per default 100%) einer “ul”.
Dies erzeugt den horizontalen Scrollbar:
ul {
margin: 10px 2px 10px 20px;
list-style-type: square;
line-height: 1.2em;
}
Dies hier nicht:
ul {
width: 90%;
margin: 20px 0;
list-style-type: square;
line-height: 1.2em;
}
ul li {
margin: 0 2px 0 20px;
}
Hier gelöst: mwxp.mobi
Desweiteren zeigt mein E65 gepunktete Linien (dotted) gar nicht an, nur durchgezogene (solid):
Geht: border-top: 1px solid #339;
Geht nicht: border-top: 1px dotted #339;
Hat jemand andere Erfahrungen oder Ergänzungen?