Use Custom Resize to Make The IE9 Mobile Experience
Last month Microsoft demonstrated IE9 on Windows Phone 7, a big w00t for that. But we won’t have a copy of IE9 on the Windows Phone 7 emulator for a while to come, and no I have no idea when the SDK will be updated. But I have started doing a lot of experimenting with mobile web development in recent months and wanted to get the feel for IE9 in a phone size.
Microsoft introduced the F12 tools in IE8 and has expanded them for IE9. I honestly can’t recall if IE8 has a the resize tool, but I think it does. But if it does it probably works in a similar fashion, but it may not allow custom resizing. Under the F12 Tools menu the first option is Resize. There are 5 choices, the first 4 are common browser window sizes. Each of these have shortcut keys of CTRL + Shift + #, where # represents the number in the list 1-4.
The last selection is Custom. This will display a small dialog. You can enter a custom width and height to a list. The list is retained across browser sessions, which is a good thing. Once you have your desired dimensions you can add them to the list. You can select any of the sizes from the list and click the Resize button and your browser will change to the target width and height. For the record 320x480 & 480x320 are pretty standard SmartPhone dimensions.
While the desktop version of IE9 is not going to be exact replication of the IE9 mobile experience, this will help you get a good idea how your site will render on the phone.