Last modified: 2008-12-17 01:44:48 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. http://en.wikipedia.org/wiki/MediaWiki_talk:Common.css 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. (http://i37.tinypic.com/kbvwad.jpg) 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 [http://i34.tinypic.com/30de2bs.png], resulting in everything being fixed except for the top sections, which I have no control over), everything appears correctly.
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.
