Resizing Pages
When you’re working on a site, it’s useful to be able to see how a page looks with a smaller display than the one you’re using. This bookmarklet, Script 17.15, resets your browser window to 640x480.
To resize your page:
resizeTo(640,480); moveTo(0,0);
The first command, resizeTo(), changes the dimensions of your browser window. The next, moveTo(), tells the browser where to put the top-left corner (Figure 17.30).
Figure 17.30. We can see at a glance that the small screen version of this site doesn’t show much of the content.
✓ Tips
By itself, this bookmarklet is only moderately useful. Where it shines is when you create a folder full of almost identical versions of this, with all the various sizes that you could want. As you can see, it’s straightforward to duplicate this for any size window.
It’s also useful (if your display is large enough) to be able to open windows side by side with identical dimensions. For instance, you can have one bookmarklet that resizes your window to be 700px wide by the max height of your display:
resizeTo(700,screen.availHeight); moveTo(0,0);
And also this one:
resizeTo(700,screen.availHeight); moveTo(screen.availWidth-700,0);
The latter resizes a page to the same 700px wide by the max height of your display, but positions the window such that it’s against the right edge of your screen versus the left. If your display is 1400 pixels or more, you should see them perfectly aligned without overlapping, each flush against one side.
Script 17.15. If you want to see how your page looks at a different size, bookmarklets like this one come in handy.
javascript:(function(){resizeTo(640,480); moveTo(0,0);})(); |