Day 8: Fit to Window Width

April 26, 2005

Almost everyone has come across a page which, for some reason, just expanded and expanded and expanded. Lots of times it happens because the site is designed by a web geek with a high resolution monitor who didn’t bother to check to see how his/her pages came out on a smaller screen. Sometimes it happens because there is just so much information on the page. And sometimes it happens for reasons no one really know why. Somewhere there’s probably an error in the HTML or CSS, but you (the user) don’t have time to stop and figure out why, you just want to get in, get what you need, and get out.

Opera has just the tool for you: Fit to Window Width.

First there was Small Screen Rendering

Experienced Opera users may remember when Opera announced Small Screen Rendering. Recognizing that the wireless web was being underutilized because far too many sites were just unusable, Opera set out to find a way to fit regular web pages onto small screens.

They then brought that technology to their desktop browser. Press shift + f11 (note to Mac users: alt + shift + f11) to see this page in Small Screen Rendering. This has immediate side benefits even on the desktop. Power users realized that they could now turn any page into a Sidebar (again I beg your patience as we will discuss those in further depth on Day 13: Sidebars and I promise you it will be worth the wait or your money back!).

But of course limited size isn’t just a problem on handheld devices. Very wide pages aren’t just annoying to view on the screen, they can be impossible to print (how many times have you tried to print something only to have it slide off the side of the page?)

Enter “Fit to Window Width” which you can trigger either by pressing ctrl + F11 or by going to the view bar and clicking the button:

[screenshot of the view bar]

The page will be automatically resized to fit the viewable width. For most pages you won’t even notice the difference (although for extremely wide pages obviously the effect is more dramatic).

This feature is especially useful for those of us who have relatives who like to email pictures but who have not yet mastered the fine art of reducing the size of the picture below 2200 pixels!

If you are going to customize the keyboard command for Small Screen Rendering or Fit to Window Width, you’ll need to know that their technical names are “handheld mode” and “mediumscreen mode”.

I have already been asked if there is a way to set Fit to Window Width as the default. In 8.0 there is not, however I hope in the future there will be a way to “set it and forget it” as they say. Oh, and you’ve probably already figured this out, but “Fit” only works if the page is too wide. If you find a page which seems too narrow (which can happen if you have a high resolution monitor and visit a website which was designed for 800x600) this will not do anything to help that. You might want to try a combination of zoom and Fit to Window Width, if needed.

Official Fit-to-Window Press Release

The new ERA of content rendering: Opera Introduces Fit-to-Window Technology for All Screen Sizes (November 23, 2004) http://www.opera.com/pressreleases/en/2004/11/23/

  • For some reason I get a lot of comment-spam attempts on this post. So I have closed comments on this entry.


    If you have a question or comment about this entry, email me at opera at tntluoma dot com and I will manually add it.


    If you have information about any time of card-game involving chips and betting, please leave me alone.

  • Hugh

    'Fit to Window Width' looks like a great new feature. Can't get the keyboard shortcut working though: ctrl + f11 toggles the menu bar off and on for me on my keyboard.

  • Ticotexas

    Is there a way to have a side panel of an existing webpage retain the small screen rendering on restart? (I keep having to Shift-F11.)

  • Richard Grevers

    There's an excellent article on the detail of the various Fit-to Width modes at Tarquin's site

  • Ian

    There is Visual Tutorial demonstrating fit-to-width here:


    http://nontroppo.org/wiki/VisualTutorials#fittowidth

blog comments powered by Disqus

Previous post:

Next post: