iPhone Browser Simulator

I have created a simple Simulator for the iPhone Safari (TestiPhone.com) web browser. You can use this to test you Web Applications and see how they might look in the Safari web browser included with the iPhone. I have tested this using IE7, FireFox2 and Safari 3 within Windows. The beautiful graphics come from the iPhoney project which is a wonderful application for testing using your Apple PC. I just wanted to have a quick and dirty browser based version of this tool that I can access from anywhere. Some of the iPhone apps are also listed for easy testing.

If you would like your iPhone application listed in the Simulator page add the url below.

42 Comments

  1. hey mojo, can you set the user agent on the page request script for your testiphone.com app? most apps (like neven’s) will probably be UA dependant, so the only way to test is to fake the UA on your proxy request…

    otherwise, good work!

  2. Hey Brad, that is a great point. I don’t know of any way to change the user agent on request (yet). I will look into finding a way. If you have any ideas let me know. I did find the iPhone user agent to be “Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3” Thanks again

  3. Hi Gregory, the iPhone currently does not render Flash among other things while the simulator will render it if you have the plugin installed on your machine.

  4. view=hor or ver, no? And scroll=on doesn’t seem to work. The spacebar doesn’t work, either. IE7. Any chance of getting the + key to work, and the on/off button?

  5. Hi,

    There seems to be a problem when using testiphone.com with a site that uses IUI from Joe Hewitt. I’m currently unsure if the problem is with IUI since IUI sites work fine in Safari 3 when the testiphone.com site is not used.

    To reproduce,

    1. Go to a website, say http://google.com/
    2. Go to a site that uses IUI, say http://moviesapp.com/ (I didn’t make this site, btw)
    3. Lookup a zipcode
    4. On the resulting page, click on the button/link on the upper left corner.
    5. Instead of going back to the home page of moviesapp.com, it goes to Google.

  6. Hi Aldous,

    I just tried your steps and I’m not able to reproduce this problem. After I click on the “Go” button I see the theaters in my zip code and then if I click on the Movies button on the top left, I’m taken back to the Movies.app homepage. I tried with FireFox and Safari in Windows XP. What browser and OS you are using?

  7. Hi,

    We were using Mac OS X. Indeed, the problem can’t be reproduced in FireFox (I was using Linux then). We’re currently developing an app and while testing on Safari on Mac OS X, we noticed this problem.

    1. We login to our app.
    2. The user’s home page shows, do something to “go to another page”.
    3. Click on the “back button”, the one on the upper left.
    4. Safari asks if you want to re-POST the things that you entered in the login page.

    We couldn’t figure out why Safari kept asking to re-POST. It was only kind of an accident that we stumbled upon the explanation to this problem. Instead of IUI going “back”, something somewhere makes the iphone on testiphone.com go back to the previous page.

  8. For the sake of blog screenshots, is there any chance you could change (or offer the option TO change) the background behind the iPhone to white? Looks better on blogs with white backgrounds. 🙂

  9. The browser simulators have one big problem; I need to test without Flash, like in the real iPhone, to ensure “noflash” html is properly rendering. Disabling the plugins in the browser doesn’t register as “flash not installed” unfortunately.

  10. This simulator would be much more helpful if the font sizes accurately represented what the iPhone displays. I have ran into a number of pages I have worked on that have some strange sizes on the fonts on the iPhone but Safari on both Mac and PC do not display them the same and neither do any other browser. None of the simulators I’ve tested are displaying the font weirdness. One particular page you can review the font size differences is this one:
    sherriwyche.com/tools/mortgage_cal (the scripts are not complete on this. I am still working out the display issues.)
    Compare the page in any browser on a desktop/laptop and then compare on iPhone.

    Thank you,
    Sherri

  11. I’ve noticed that advanced mobile browsers like the Opera, and safari mobile do not render a site centered in the viewport ( there’s always an horizontal scrollbar). Is there a way to write css rules that applies only to mobile browser?

    TIA

  12. Safari on iPhone supports the meta viewport tag. You can use something like this:

    <meta name="viewport" content="width=760, initial-scale=0.4, minimum-scale=0.4" />

    For more on this and other iPhone supported tags read this page on the Apple Developer page.

  13. This is a great looking app, but having just finished an app where everything had to be a very precise size, I discovered that a couple of your measurements are off.

    — In vertical orientation, the entire screen is supposed to be 480 pixels high, but yours is 484 (your width is correct at 320). In horizontal orientation, your width is correct at 480, but your height is 321.

    — In vertical orientation, the grey button bar at the bottom is supposed to be 44 pixels high, but yours is 40. In horizontal orientation, it’s supposed to be 32, but yours is 41.

    I know this is all terribly anal, but those are the official Apple specs, available on the Apple developer site. Send me an e-mail and I can send you a PDF, if you’d like.

    One final thing, you can trigger a script when the iPhone changes orientation. In my case I load a style sheet for the new orientation. You might want to figure out how to simulate this in your app.

    I confess that my motives are quite selfish, because I’d like an easy way of showing off my app to potential clients, whether they have an iPhone or not, and yours is the best way I’ve found.

  14. Hi Mojo,

    I like the simulator and would like to use it in a mobile developer lab course. However, I cannot ensure that I have Internet access from the lab machines. What I thus need to do is download a local copy and deploy it on the lab machines. I am also planning on adding some Javascript to the simulator to remove flash and Java from the loaded apps.

    What is your policy on this? Is this simulator to be considered open source, etc?

  15. Why don’t you make one in Flash?
    Because if it’s in flash, it’s easier to create an HTML parser.
    You can also make a JavaScript parser.
    But you cannot make it run Java apps, so it will be like
    REAL iPhone Safari. Also, make the iPhone keyboard
    pop-up, and enable use of the actual keyboard too, so
    you can type with your real keyboard or click on the
    letters using your mouse.
    Do it in flash.

  16. Is there a way to get rid of the chrome from the bottom of the screen i.e. the safari navigation buttons?

  17. hi, is there a way to set the user agent, so that when a webpage is entered into the onscreen iphone simulators URL bar, the resulting webpage that is looked up, actually sends thru an iphone optimised version (assuming it does exist and is checked for) of a website?

  18. Why is testiphone.com sending me a ton of fake referrals and wasting my bandwidth? I used the site once, but will never again.

  19. Hi,

    It looks like it’s auto-apending http:// to anything, which is a problem if you want to test a secure site.

  20. I am interested in advertising URLs which forward to squeeze pages on iphones. Does your simulator allow advertisers to view their ads to make sure they are apppearing and are presentable before we start paying for our ads. If not would you consider developing and offering such a program. I would gladly sign up as your first customer. John Bonifant

  21. Hey Dufus why didn’t you develop this the same size as an IPHONE? You said you can use this to see how it looks, well how can you test frontend when it’s 3 times as big as the real IPHONE? Leave it to a backend developer to develop something as stupid as this.

Leave a Reply

Your email address will not be published. Required fields are marked *

Visited 48363 times, 4 so far today