If you’re a web developer, then you know that Safari is one of the best browsers for mobile devices. It’s fast, secure, and easy to use. But what if you want to view mobile websites in Safari? That’s where the developer tools come in. With these tools, you can create and test mobile websites in real time. To get started, open Safari and click on the three lines in the top left corner of the screen. This will take you to a list of development tools that are available on your computer. The first tool is called “Safari Developer Tools.” This tool allows you to create and test mobile websites in real time. The second tool is called “Safari Web Inspector.” This tool allows you to see how your website looks on different devices. The last development tool is called “Safari Debugger.” This tool allows you to debug your website so that it works correctly on different devices. Now that you have these tools, it’s time to start creating mobile websites! To start, click on the “Create New Site” button at the bottom of the screen. Then enter a name for your site and choose a location for it on your computer. You can also choose a language for your site. After clicking on “Create Site,” Safari will show you an example of how your site will look when it’s ready for testing. To test this site, open Safari and type in http://localhost:8080/ into the address bar of your browser window. You’ll see that our example website works perfectly when tested with Safari 4 Developer Tools!
By default, Safari will show standard desktop websites. But by making a simple change, you can switch it to work like Safari Mobile on the iPhone or iPod Touch.
Getting Started
First make sure you have Safari 4 for Windows installed. You can download Safari directly (link below) and install it as usual.
Or if you already have another Apple program installed, such as QuickTime or iTunes, then you can install it from Apple Software update. Simply enter apple software update in the Start menu search box.
And then select Safari 4 from the list of new software available. Click Install to automatically download and install Safari.
Accept the license Agreement, and then Safari will automatically install.
Once this is finished, Safari will be ready to use.
View Mobile Sites in Safari
First, we need to enable the developer tools. Click the gear icon on the toolbar, and select Preferences.
Click the Advanced tab, and then check the box that says “Show Develop menu in menu bar”.
Once you’ve closed your settings box, click the page icon, select Develop, then User Agent, and then choose one of the Mobile Safari settings. In our test we chose Mobile Safari 3.1.2 – iPhone.
To make your browser emulate a mobile device better, you can hide the bookmarks and tab bar to have a more streamlined interface.
Click the Gear icon, and select “Hide Bookmarks Bar”, and then repeat and click “Hide Tab Bar”.
You can also shrink your window to be closer to the size of a mobile device screen. Once you’ve done these things, Safari should look similar to this screenshot. Here we have loaded Google.com, and you can see it in its iPhone-style interface.
Simply enter any website into the address bar, and it will load in its mobile interface if it has one. Here is Google’s other mobile offerings, right inside Windows.
Gmail loads messages with the default iPhone interface.
One especially interesting mobile site is Apple’s online iPhone User Guide. When loaded in Safari with the iPhone setting, it loads with a very nice mobile UI that works just like an iPhone app. In fact, you can even click and drag to scroll, just like you would with your finger on an iPhone.
Conclusion
Even if you do not have a Smartphone, you can still preview what websites will look like on them with this trick. Not all sites will work of course, but it’s fun to play around with different sites that have mobile versions.
Links:
Safari 4 Download
Apple iPhone online user guide
