Last modified: 2008-12-17 01:44:48 UTC

Wikimedia Bugzilla is closed!

Wikimedia has migrated from Bugzilla to Phabricator. Bug reports should be created and updated in Wikimedia Phabricator instead. Please create an account in Phabricator and add your Bugzilla email address to it.
Wikimedia Bugzilla is read-only. If you try to edit or create any bug report in Bugzilla you will be shown an intentional error message.
In order to access the Phabricator task corresponding to a Bugzilla report, just remove "static-" from its URL.
You could still run searches in Bugzilla or access your list of votes but bug reports will obviously not be up-to-date in Bugzilla.
Bug 16654 - iPhone compatibility CSS
iPhone compatibility CSS
Product: Wikimedia
Classification: Unclassified
General/Unknown (Other open bugs)
Macintosh Mac OS X 10.4
: Normal enhancement (vote)
: ---
Assigned To: Nobody - You can work on this!
Depends on:
Blocks: css
  Show dependency treegraph
Reported: 2008-12-15 20:53 UTC by Floyd Maseda
Modified: 2008-12-17 01:44 UTC (History)
2 users (show)

See Also:
Web browser: ---
Mobile Platform: ---
Assignee Huggle Beta Tester: ---

Screenshot showing a zoomed Wikipedia article page with and without proposed CSS change (256.01 KB, image/jpeg)
2008-12-17 01:44 UTC, Brion Vibber

Description Floyd Maseda 2008-12-15 20:53:47 UTC
I have a proposal to add a line of code to the Wikimedia software's CSS that will better enable compatibility with the iPhone (and anything else running Mobile Safari). Though Wikipedia on iPhones is a small market, the code doesn't hinder any accessibility with other platforms, so there's no harm done to anything else - only benefits for iPhone users. shows all the browsers it has been tested on - all of which passed.

When viewing Wikipedia on an iPhone, the Main Page's (and some other articles') left column's text(TFA, DYK) is much larger than the right column's text(ITN, OTD); Also, on any Wikimedia project the licensing information at the bottom of the page, the tabs across the top ("edit this page," "watch," etc.), and user links ("Username," "my watchlist," etc.) in the top right corner of the page are oversized. (

This error occurs because the iPhone is set to automatically increase text size for readability; most of the time this looks fine, but in Wikimedia's case, the text would look better if it wasn't resized.

To fix this problem, all that needs to be done is add "-webkit-text-size-adjust:100%" to the body tag in skins/common/shared.css. After the code is applied (which I've done on w:User:Dudemanfellabra/Sandbox2 [], resulting in everything being fixed except for the top sections, which I have no control over), everything appears correctly.
Comment 1 Brion Vibber 2008-12-17 01:44:08 UTC
Created attachment 5585 [details]
Screenshot showing a zoomed Wikipedia article page with and without proposed CSS change

I tested this CSS bit on my user style and loaded up an article page.

The screen shot on the left is using the standard style, zoomed to show the content column with a double-tap. The text is smallish but legible.

The screen shot on the right is using the proposed change, which cancels all text size adjustment. Again, it's zoomed to display the content column, thus maximizing the reading area. As you can see, the text is so small as to be completely illegible. Zooming further would require scrolling across the page to read a complete line of text (not good!) or rotating the device to landscape mode (requires much more vertical scrolling, and is more awkward to hold besides being a poor practice to force users to read in one orientation or the other).

I'm going to have to close this one as INVALID; the recommended change is very much not an improvement. Perhaps particular pages like some fancy multicolumn main pages could benefit from some custom per-page adjustment, but as an overall change it would make the site as a whole much more difficult to use on the target platform.

Note You need to log in before you can comment on or make changes to this bug.