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.

Visited 40167 times, 19 so far today

42 Comments on “iPhone Browser Simulator”

  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. Would you add Kudit.com to your list of sites to try in your simulator?

  3. 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

  4. Hi Ben, nice app, will add it today.

  5. Hey Ben, I notice your sim renders Flash, (I tried http://www.hairspraymovie.com), yet its my understanding the Iphone browser will NOT render Flash. Please comment, thanks.

  6. 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.

  7. Can you offer a way to link to your tester so the display comes up horizontal…

    Nice work!

  8. Thanks for the suggestion Alan, use view=hor or view=ver

  9. 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?

  10. Please try clearing your cache and try again. Both scroll=on & view=hor work for me as well as the spacebar to easily flip views. for example http://testiphone.com/?scroll=on&view=hor&url=http://npr.org

  11. OK, scroll and spacebar work now. You had written: “use view=h or view=v,” above. FYI, dimentions=dimensions.

  12. Thanks Alan, fixed now, spelling is not my strong point :)

  13. 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.

  14. 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?

  15. 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.

  16. 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. :)

  17. Good point David, will have something for you shortly

  18. Done.
    To change the background color on load use the bg url parameter. Some examples are:

    bg=ffffff
    bg=222

    etc.

  19. Hi Aldous, can you provide the URL to your app so I can test it out please.

  20. 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.

  21. 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

  22. 22

    From planner

    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

  23. 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.

  24. Hey – my web page looks perfect on the Simulator but when on the iPhone it appears small and I have to double tap it to enlarge it to the full screen… Any suggestions?
    http://www.lancephoto.com/MTB/home.html

    Thanks – Lance

  25. 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.

  26. Hi,

    It is nice but i think the .mobi sites are working differently that the any other html site works. so both sites r different. The html site & the mobile sites. U can check it http://www.justdial.com/
    http://wap.justdial.com/wap_selectcity.php

    check it out these links.

  27. Hi, cool simulator! but as it uses frames it will not work with ning.com, is there a way around this? It would be perfect for presentations.

    Thanks,
    Eddie

  28. 28

    From Nicolai

    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?

  29. 29

    From some smart guy

    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.

  30. Hey man did u know we have the same family name?
    Dude!!!

  31. Are you going to add the pan and zoom effect for you iPhone emulator?

  32. Hi! Is there a reason why http is preppended, I need to test a https website :(

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

  34. 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?

  35. 35

    From Annoyed

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

  36. please disable FLASH in the simulator thx

  37. Hi,

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

  38. 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

  39. 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.

  40. This doesnt work. Resizing the browser screen (iframe) doesnt makes it a simulator!

  41. The simulator shows web pages with big sprites (>=1200×1500 pixels) while the iPhone Safari doesn’t.

  42. Use this to serve special css to the iphone (works only with safari browser):

    YOUR CSS
    @media only screen and (max-width: 480px) {
    YOUR IPHONE CSS
    }

Leave a Reply