iPad

How Does your Website Look on an iPad?


If you are curious to know how your website design looks like on the 9.7” screen of an Apple iPad, you can either borrow your friend’s iPad for some time, order one for yourself from eBay (if you don’t live in the US) or just read this.








Step 1: Start your Firefox (or Safari) browser and change the user agent string to that of the Apple iPad. You may use Google Chrome as well but it just takes lot of effort to change user agents in Chrome.



Step 2: Disable the Adobe Flash plug-in from your browser settings.



Step 3: Open iPadPeek.com and type the URL of any website in the built-in Safari browser of the “virtual” iPad.



This tool will render websites in landscape mode by default but you can click the top edge of the iPad image to switch the page orientation from landscape to portrait mode and back.



The screen resolution of your current desktop is probably much higher than a iPad (which is 1024-by-768 pixels) so this tool may not exactly simulate iPad’s web browser but its as close as you can get without the real thing.



Related: How to Completely Test Your Website







You may use the site to view other iPad-friendly websites like Google, Yahoo! News, Facebook, Gmail and so on. There’s an on-screen keyboard as well that gets activated when you click the address bar (just like the real iPad) but it’s non functional.



The tool is open-source and you can grab the full code here. Thanks Orli for the tip.



Ads by Google Pain-Free Browser Testing saucelabs.com

Run Cross-Browser Test Scripts on a Cloud w/ No SysAdmin. Free Trial.



The 2011 Hyundai® Equus HyundaiUSA.com/Equus

Equipt w/ Premium Amenities & 385 HP. Discover the Savvy Equus Today!

Reader Comments

Actually, impersonating an iPad with chrome is super easy on a Windows machine, as seen in this lifehacker comment thread: lifehacker.com/comment/21276101/



The fast and easy 2-step way:

1 – open the Run command and type: chrome -user-agent=”Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10″

2 – press enter.



To get it back to normal, close all chrome windows and open the Run command and type: chrome -user-agent



You may have to clear your cookies to get all sites back to normal, but this works well and very quickly.



Written by Ryan on 04.05.10



This is super easy to do with WebKit nightlies. Just develop from the menu, then select Other and paste the string, that’s it. No need to money with Chrome since WebKit and Chrome use the same inspectors for web development. The only thing WK doesn’t have is plugins but, I found that to cause bloat which is why we abandoned Firefox/Firebug for WebKit once it got to snuff with Firebug.



WebKit keeps progressing too. Now we get line numbers on the CSS inspector like Firebug did so going straight to the CSS line you need to tweak is there.



Written by Eric on 04.06.10



The address bar within the ipadpeek.com doesn’t show the client side redirects that happen, for example, try livestream.com in ipadpeek.com, and the address bar of ipadpeek.com still says livestream.com, where as, it actually redirects to iphone.livestream.com, which you can confirm by typing in the address bar of the browser



Written by Nagaraj Hubli on 04.06.10













Meet the Author



Amit Agarwal is a personal technology columnist and founder of Digital Inspiration, one of the most widely read how-to blogs in the world.. read more »



Subscribe

Sign up for our daily email newsletter







SponsorsRelated Reading Is your computer running slow? Crucial can help. A memory upgrade is one of the most affordable, effective ways to boost performance!

-Our tools find the right upgrade--guaranteed compatible

-Upgrades for PCs, notebooks, netbooks, and Macs

-Affordable, easy to install

-Online customer/tech support



Read more..Advertise