Mobile Phone Screen Emulator | Mobile Web Development Tool
a useful resource for mobile web developers and designers
 |
 |
|
 |
 |
W3C Standards Report (open in new window)
mobiReady Compatibility Report (open in new window)
Instructions
This website has been created to assist mobile web developers and designers when creating content specifically for mobile phones, especially modern smart phones such as iPhone or Android.
As any web designer knows, getting mobile content to sit 'just right' on a mobile device can be a laborious task of trial and error. With this tool it should make the whole process a lot quicker.
Simply enter the URL of your mobile content into the URL field above, set the screen dimensions in pixels of the handset you wish to emulate and click the 'Generate Phone View' button.
Your website will appear in the phone template at the specified dimensions making it easier to troubleshoot potential layout issues with your mobile content.
As an added bonus, your site can also automatically be checked with mobiReady and the W3C mobileOK Checker completely free of charge. Both reports will be available to view underneath the phone emulator when ready if this option is selected (tick the box).
If you are creating an iPhone / Android specific (or touchscreen equivalent) web site/application then select 'Yes' for the touch screen option. This will render the phone template to look more like an iPhone / Android.
NOTE: The Touch Screen option will not render websites exactly as an iPhone or Android does. The real iPhone has a full web browser so websites are completely scaled to fit within the iPhone window. This emulator allows you to test websites and applications that you may be developing at a fixed width and/or height to fit inside an iPhone browser window without any native page scaling (by using the 'Viewport' meta attribute for example). Also, this site renders the web page output at 72dpi scaling which is fine for browsing on most monitors. Bear in mind an iPhone has a higher screen resolution so the page rendering on the device may be slightly different. Generally this website is good enough for most testing purposes (I use it regularly myself in my day job as a web designer/developer), but obviously nothing beats the real thing!
FAQ's
Where can I find phone screen dimensions for a specific handset?
Due to the speed at which new mobile phones and hand held devices come onto the market it is very difficult to maintain a definitive list of screen sizes. The simplest way of finding out what screen size a particular mobile phone has is to visit the manufacturers website and look at the specs. Make a note of the screen height and width in pixels then come back here and emulate it.
Does the emulator render websites exactly as the mobile phone would?
No, not exactly, but very close and good enough for most mobile web development and design purposes. If you use this tool as a guide then you should find it highlights potential issues very quickly when reducing your mobile site content to the small screen. The only other option is to go out and test your website on every available mobile handset, which unless you work for a mobile phone company is probably very unlikely!
If you select the report option when viewing your website content, the mobiReady report has a visualisation section which will render your web page using mobile handset emulators, although the list of handsets it emulates are quite out of date now so should only be used as a rough guide.
Is this tool free?
Yes, completely free! It is supported by advertising, so if you find this site useful please consider visiting some sponsors of this page in order to help keep it going. Alternatively 'Like' it on Facebook and send some more traffic our way! :-)
Other Useful Resources
W3C Mobile Content Checker (http://waxler.w3.org/mobileok/index.html)
Check your website for mobile-friendliness against W3C standards.
readyMobi (http://ready.mobi/)
A great tool to check your website for mobile compatibility. Includes display emulators for several popular mobile handsets.
Mobify is the leading mobile web platform to create incredible mobile experiences.
Locked Out? (London Locksmith)
Useful website if you find you need a locksmith in London (like I did!)
How To Create a Website
Brush up on your HTML skills with this tutorial
How To Make a Podcast
Learn how to create a podcast to promote your mobile website
Sell My Tablet
Want to sell or recycle your old tablet? Check out this site!