Last modified: 2008-10-04 06:34:59 UTC
Currently we have no stylesheet for handheld devices. The CSS will devolve pretty well if the device doesn't support stylesheets, but if it tries to interpret the screen stylesheets we use now, that will be actively *worse* due to the enormous floating navigation bars. Probably what we want is the content starting at the very top, or close to it, with a prominent "jump to nav" link, and ideally the search bar at the top at least for the main page.
Useful pages: http://www.htmldog.com/ptg/archives/000055.php http://my.opera.com/community/dev/mini/phones/ CSS could be used to improve the layout for those UAs that do support it. JS could perhaps be used to collapse floated images with a "show" button, too, for those that support JS (because scrolling past huge images is probably annoying). Enwiki could use autohiding for infoboxes as well. Opera Mobile actually deals with Wikipedia pages quite gracefully as-is. An emulator is available in recent desktop copies of Opera.
Would be useful, untill a css specific to "handheld" media type is developed, to have this media type force to use the same css of the print media type? That is replace in the HTML of each page, the line that starts with <link rel="stylesheet" type="text/css" media="print" href=" with a line starting with <link rel="stylesheet" type="text/css" media="print, handheld" href=" (sorry, I do not know where to hack in the code, so I can not provide you a patch)
(In reply to comment #2) > Would be useful, untill a css specific to "handheld" media type is developed, to > have this media type force to use the same css of the print media type? I couldn't see why. They're quite different media; in particular, print has a much larger canvas, as well as effectively unlimited bandwidth and processing power (since it's not real-time), and they're also static (can't deal with links or scrolling, etc.). Those handheld browsers that support CSS are generally designed to try figuring out how to deal with screen stylesheets, and won't deal nearly as well with a print stylesheet. Unless you were suggesting to just use the same file for both, and give each its own part via @media declarations within the stylesheet itself. I don't see much point in that; saving a few bytes on every page load?
Okay, I checked something in for Monobook in r18777. It seems to be working pretty decently on Opera Mini, but that was clever enough to avoid the floats and so on already. I suppose I'll FIXED this when I make comparable stylesheets for the other skins. The duplication of code between the screen/handheld stylesheets kind of annoys me. I could fix that up by just loading the whole thing for both and using suitable @media declarations, of course. That would probably be best . . .
More changes, see r18949 (also r18965). Still Monobook-only.
(In reply to comment #5) > More changes, see r18949 (also r18965). Still Monobook-only. There was an odd change to monobook/main.css in r18948 (line 773): r1=18903&r2=18949">http://svn.wikimedia.org/viewvc/mediawiki/trunk/phase3/skins/monobook/main.css?r1=18903&r2=18949 "display: block;" This puts the portlet links in #p-navigation at odds (different spacing/padding) with every other left-side link portlet (toolbox, other languages, and MediaWiki:Sidebar). For a simple example of this, try this in your user/monobook.css on en.wp: .portlet a {background-color: #ccffcc; } #p-tb a, #p-interaction a, #p-navigation a { text-decoration: underline; } Screenshot: http://test.wikipedia.org/wiki/Image:Portletfunky.gif
That wasn't a change, I was just reshuffling existing code (and I believe I un-reshuffled it later, anyway). That style was added by tomgilder, r11305. Offhand I can't think what the point might be.
Removed the stylesheet in r24163 after David Storey from Opera said it was screwed up, which I believed, given how little testing it got. His comments on a handheld stylesheet: > Removing the handheld stylesheet entirely would probably be the best > option for now. If you have time later you can play with it using > the small screen option in opera desktop and the opera mini simulator > (once we've removed the hack we have in place). We can help you with > any issues. As Safari doesn't support handheld, it would be best to > include a media query with the handheld declaration, such as: > > <link media="handheld, screen and (max-device-width: 480px)" > href="mobile.css" type="text/css" rel="stylesheet" /> > > That will make opera and iphone safari pick up the handheld > stylesheet. You may need to add meta tags to disable Safari's zoom > feature 9I don't have a iPhone to test how it handles media queries > etc).
Fixed by Brion in r40414 I believe. Resolved as such.
