Apple introduced the viewport meta tag in mobile Safari to help web developers improve the presentation of there web pages on the iPhone. We added support for the viewport tag in mobile Firefox for the same reasons.
The viewport tag allows web developers to set the width, height and scale of the browser area used to display web content. However, some websites are not doing a good job configuring the viewport tag and it affects the presentation in Firefox.
When setting the width or height, developers can use a fixed number of pixels or use the constants: device-width and device-height. The iPhone is 320px wide in portrait and 480px wide in landscape. Other devices have different screen sizes. It seems the “width=320” is a popular fallback though. See how Facebook and DeviantART display in Firefox on the N900 (480px in portrait and 800px in landscape):
touch.facebook.com
deviantart.com
Don’t get me wrong. I like “touch-friendly” web pages on my mobile device. However, the iPhone is not the only mobile device out there. If a web developer has gone through the effort to make a “touch-friendly” web page, please configure your viewport to work in other devices. It’s easy!
It works “full page” in MicroB but not in Firefox on the N900.
Is MicroB overriding this setting ?
These are exactly the kinds of headaches that will continue to occur as long as we’re acquiescing to web developers requests (and encouraging that mindset) for a fragmented web. See my comments on the “Mobile Optimized Web Pages” entry.
MicroB does not currently support the viewport tag, so it ignores it.
Personally, I like webpages designed for fingers and not a stylus. If this “fragments” the web, so be it. One size does not fit all. On the other hand, I do want full HTML5 support, latest JavaScript engines and great browser clients too.
I like pages designed for neither. I don’t like pages that assume any kind of interaction method, because only in those situations does there exist the possibility that the designer’s envisioned use cases don’t mesh with the user’s actual use case.
Things like the viewport meta tag is one of those easy solutions that brings short-term satisfaction, but ends up screwing over users and anyone who has a hand in the development of any user agent in the long term. Being a minority share in mobile browser market should, I think, bring these kinds of issues to the forefront, and reveal that the solution is not “okay, please add in a use case for us now.”
The sentiment in your “the iPhone is not the only mobile device out there” quote and the effects displayed in the screenshots are succinct demonstrations for my disdain of the approach focused on short-term satisfaction.
@Mark Finkle “One size does not fit all.”
Yeah, that’s why we have CSS. The optimal one should be chosen on the server side, based on your screen size. Fragmentation is bad, as it presents extra work for web designers.
I have 4 devices with 4 different screen sizes (5, if you count the times I hook up to my TV). I want things layed out nicely (or at least usably) on all of them.
Even on the larger of those devices I actually like to size my own windows to something other than 1024×768 sometimes! Wouldn’t it be lovely if you could get that Facebook view by just resizing your window? (And then throwing it to the side of your desktop for background use.)
HTML/CSS was in part designed to handle this exact problem, and it doesn’t do too badly — it’s the best of all the alternatives, and it sounds as if it’s much better than the viewport tag. But HTML layout desperately needs addressing, partly for problems like this and partly for problems that have afflicted web designers (and web users) since the mid-90s.
It’s fantastic that both Gecko and Webkit support Flexbox layout now. (Mozilla should be promoting this hard! I expect to see a hacks.mozilla.org article shortly…) Flexbox can get us 50% of the way to cross-device web pages because it’s just so easy to rearrange layout without changing the markup.
And HTML5 introduces some interesting new tags that might make semantic *layout* a real possibility (although it will be tricky to do well). Being able to rearrange aside, nav, header and footer elements, etc. and optimising the view for the main content might turn out to be incredibly useful on mobile. The very common 2- or 3- column website often looks clumsy on small devices, but would be so easy to rearrange/resize by the mobile itself if it were semantically marked up.
For these reasons, I’m optimistic that the web can be unified, not just for javascript, multimedia and HTML5, but also for layout too.
I suspect this will be a problem to more people when iPhone comes in a version with higher resolution.
That’s just what happens when you do such things to the web. A good layout should just float and magically fit into any windows size you choose… Anything else means trouble – as shown here.
But I guess we’ll see less *good* design now that people think of web pages as graphics of fixed sizes rather than text files.
@LarsGunther: I think it will be a probelm. Maybe that’s why the iPhone resolution has stayed the same overall multiple releases.
@Funtomas: Sure, CSS works nicely to handle layout. Remember that mobile browsers do other things, like assume a fixed sized browser width (800px in Firefox Mobile and 930px on iPhone) which can be a hindrance to CSS liquid layout. The viewport meta tag allows the web page to work around that issue.
Mobile browsers will also zoom to page width, which might also break the web developer’s design.
Oskar: It’s more than making a layout that magically fits. Desktop pages are designed to show lot’s of information and use the mouse in ways you can’t on a mobile touchscreen. Using hover effects, mouse in/outs and tooltips doesn’t work well on a mobile device.
Making widgets and buttons finger sized is another concern.