Mobile browser testing
From MediaWiki.org
For issues previously identified and resolved, please see the archives.
It would be nice if we could test MediaWiki's behavior more regularly in browsers for mobile and handheld devices. I'm collecting resources I come across here:
[edit] Development and testing claims |
||
|---|---|---|
| Device | Browser | Owner |
| (simulated) | Opera Mini | brion |
| iPhone | Mobile Safari | brion |
| iPhone | Mobile Safari | Lisa Ridley |
| PalmTX | Palm Blazer v4.3 | pfctdayelise |
| Palm Treo 700p | Blazer | Aerik |
| HTC Hero | Android Browser, Steel | Ge0rgecz |
Contents |
[edit] Opera Mini
Opera Mini is a client-server variant of Opera, whose client side can run on many Java-enabled mobile phones and other handheld devices. There is a simulator which runs the client side as a Java applet in a desktop web browser. Nice! VERY convenient and easy to test.
Additionally, regular Opera can be switched into a "small-screen mode" which is similar to the rendering of Opera Mini.
[edit] Issues
Anchor links seem to jump to the top of the page, making the 'navigation' and 'search' accessibility links and the table of contents kind of unproductiveInfoboxes seem to take absurdly large amounts of screen real estate before you get to content in many articles :P- Css and Js are not read, which render a very different presentation that on a classical browser.
As of January 2008, the version in the simulator renders pages very much like they appear on a "grown-up" browser, requiring you to zoom in to read anything.
Looks and behaves a *lot* like Mobile Safari, but without a touchscreen that seems awkward to me. :)
As with the iPhone, the much improved HTML and CSS etc support is verrrrry welcome, but to make the site more easily usable we should still look into a good handheld stylesheet.
[edit] Windows Mobile
Windows Mobile / PocketPC / Windows CE / whatever it's called this week powers a lot of PDAs and fancier mobile phones, and comes with some variant of Internet Explorer.
Microsoft supplies an emulator which runs on Windows PCs and includes OS images for Windows Mobile including IE. Unfortunately I haven't had any luck getting networking up, so haven't managed to connect to anything to see how it's going. I'm not sure if this is because of some quirk of Parallels' network bridging, so it might be easier on a real Windows PC.
- Device Emulator 1.0 With Windows Mobile OS Images
- Virtual Machine Network Driver for Microsoft Device Emulator (possibly not needed if VirtualPC is installed?)
- directions on getting networking up which didn't work for me (note from chris rue: this method will not work inside a virtual environment, as indicated at the beginning of the post)
- wm5 device emulator: network connectivity inside a virtual environment from chris rue: this method works for enabling connectivity to device emulator when it's installed inside a virtual environment. can't personally test this method using parallels (since i don't have a mac), but would appreciate knowing the outcome if someone tries it. thanks!
- javascript is not functional, and several additional stuff used by project's Monobook.js are not available.
[edit] PlayStation Portable
The webbrowser of the PlayStation Portable is a NetFront browser. It doesn't render MediaWiki correctly, especially in Smart-Fit and Just-Fit modes.
What could help is supplementing MediaWiki by using useragent sniffing to adapt the layout (by CSS) to a resolution of 480x272 px. That should work to make it doable to use MediaWiki on a PlayStation Portable.
[edit] iPhone
- See iPhone issues for more information.
iPhone and iPod Touch ship with a Safari variant, running on the WebKit engine. It's pretty complete, with very good HTML, CSS, and JS support.
A general impression of rendering can be tested reasonably well just by pulling up Safari 3 on a Mac or Windows box (or even a current WebKit-based browser on Linux, I imagine), however the zoom behavior and usability of forms is hard to test without an actual device handy.
[edit] Issues
General layout and sizing are not very convenient with the stock MonoBook skin, but MediaWiki is fully functional.
Editing a page or section that spans more than a few lines is impossible due to the lack of a scrollbar within the edit form textbox (a limitation of the Safari Mobile browser due to the inherent design feature "pinch in" and "pinch out", and the "flick to scroll" feature of the browser display screen).
Some custom styles and a more linear layout would be beneficial.
Have added support for home screen bookmarking icons.
[edit] Android
Smart phones running on Android mobile platform ships with Browser running on the WebKit engine. Its compatible with Google Chrome for Windows or Linux. You can use emulator.exe (from Android SDK) for testing Browser behaviour without having your own Android phone.
How to install and run Android emulator and integrated web browser:
- download lastest Android SDK (zip package here)
- unzip into (c:\android for example)
- use Start->Run.., and type cmd (command line) in
- use commands c: and cd "c:\android\tools\" to set active folder
- create android virtual device (AVD) using command: android create avd -n cupcake -t 2
- launch emulated cupcake device: emulator -avd cupcake
- ... whenever you need to start that same emulator again, just repeat steps 3,4 and 6.
[edit] All mobile device browsers
- ergonomy not fit for small-sized screens. Links that we would need to reach easily are at the bottom (harder to get to since the page is longer on a smaller screen), like the search form.
- at the bottom of the page, information about mediawiki, copyright etc. should be put on a separate page and replaced with a link so as to not bother user with 2-3 screens of footnotes.
- Inline .css formatting (which occurs when formatting instructions are imbedded in templates and page content rather than pulling from style sheets) is frequently geared toward the display of information in a full-sized browser. While it is possible to implement utilization of external stylesheets based on the device accessing the site, it is not possible at this time to conditionally utilized inline style sheets in templates and content.
- The display of tables (content formatted using wikitable markup or html <table>, <thead>, <th>, <tr> and <td> tags) can be problematic for tables that extend beyond the display width of portable devices; some of these devices will truncate the table at the width of the display and do not provide a mechanism for scrolling to the right to see the remaining content.
