View Mobile Websites In Windows With Safari 4 Developer Tools

Have you just made a mobile-friendly version of your blog? Well then, it is obvious that you will need to test or preview it to know how it will actually look on a mobile device.

This is a step that you cannot miss, as you get a chance to make changes to the blog’s appearance if it does not meet your all requirements. So, want to preview the sites or blogs designed for mobile devices even if you do not possess a smartphone? Kindly continue reading to know how!

mobile website in window

What Will Give Me A Preview Of My Mobile Site

Apple provides its own browser for viewing the mobile sites exactly as they will appear on its iOS devices such as iPod Touch and iPhone. The developer tools in the Safari 4 browser for Windows allow you to see the mobile sites or blogs exactly as they will appear in the mobile browsers. Safari 4 can display a Web page as it will appear in its mobile version for iPhone and iPod Touch, Safari Mobile.

By default, Safari 4 shows a Web page as it will appear in the browser installed on Windows. However, by choosing a different user agent or browser, you can make Safari 4 function exactly like the chosen browser that is meant for iPhone or iPod Touch.

How To Acquire Safari 4

Not many people have this browser on their PCs. If you are among these people, you first have to ensure that you have installed Safari 4 for Windows. In case you don’t have it, you will have to download it from and follow the usual steps of installation.

mobile website in window with safari 4 developer tools

Alternatively, if there is an Apple application already installed on your PC such as iTunes, simply use the Search box in the Start menu of Windows Vista or 7 and enter apple software update. This will open the Apple Software Update window from where you can install Safari 4 by selecting the Safari 4 option from the second list of New Software.

safari 4 developer tools

Finally, click the Install button for automatic download and installation. During the process, the License Agreement dialog box is displayed wherein you need to click the Accept button.

mobile website in window with safari 4 developer tools After this, Safari 4 will get installed automatically on your PC.

mobile website in window with safari 4 developer tools

How To Make Safari 4 Display Mobile Sites Or Blogs

The very first step is to make the Develop menu visible in Safari 4. To do so, open the browser, click the Gear icon that is present on the Toolbar, and select Preferences.

mobile website in window with safari 4 developer tools

Now, select the Advanced tab and the Show Develop menu in menu bar check box in it. Finally, close the dialog box.

mobile website in window with safari 4 developer tools

Now, click the Page icon that is located on the toolbar and select Develop --> User Agent. This will display a list of browsers to which Safari 4 can switch. For instance, click Mobile Safari 3.1.2 – iPhone to make Safari 4 function like this mobile browser. This is nothing but emulating a smartphone so that you can view your mobile site or blog.

window with safari 4 developer tools

For a more real touch, shrink the browser window to the screen size of a mobile device and consider disabling the tabs and bookmarks.

mobile website in window with safari 4

You can select Gear --> Hide Bookmarks Bar and again selecting Gear --> Hide Tab Bar respectively.