A couple days ago I tried to implement css media queries on one of my website. The scenario is, when the size of the screen is less than 480 pixels, my website will use different style. It works fine on my desktop browser when I resize my browser less than 480 pixels. My curiosity is, what is it going to look like on iPad and iPhone? I did search on Google and found the online simulator, so that you won’t need to do installation on your computer.
Are you looking for iPad simulator only to test your website? then you will need to visit iPad Peek. I love iPad Peek because I don’t need to install anything on my Mac. There are some other simulator out there, but you will need to install it on your computer. Some will only work if you already install Adobe Air and some only simulate how an iPad application works. I tried iPad Peek to display one of my website, dosenjaga.eepis-its.edu and here is the result.
What you only need to is only enter the url and iPad Peek will display it for you. The fun stuff is, you can also rotate the iPad so that you can see your website in portrait or landscape view. You can do it by clicking on iPad Peek border, I tried and here is the result of my website.
Displaying your website on iPad Peek will not give you a real iPad experiences especially for Flash. If you want to see your website without Flash, try to disable it on your browser
The first iPhone simulator is Testiphone.com. Testiphone lets you type your website URL and it will display it for you. I tried my website and here is the result
It seems that my css media queries works fine here. Testiphone also lets you rotate the iPhone to see your website on portrait or landscape view. You can do it by clicking on the right icon, next to book icon. I tried on my website and here is the result.
This iPhone simulator currently does not have Java or Flash plugin or other plugin that works in PC based browser. The dimension of this iPhone simulator is 320 x 365 pixels on vertical view and 480 x 200 pixels on horizontal view.
The second simulator is iPhone4Simulator. At a glance this simulator so much like TestiPhone, you only need to type the URL and it will display the website for you. One of the differences is you need to slide to unlock the iPhone and then you can type your URL. This simulator is a web based application that also use jQuery, like when you slide to unlock. Here is the result of dosenjaga website on iPhone4Simulator.
To get a different view, portrait to landscape view or vise versa, you can do it by rotating this simulator. To do that, you need to click an icon on the left side of your browser. Based on my experience, you will need to type the URL again when you change the view, this is the reason why I’d rather use Testiphone than iPhone4Simulator. Here is the result of my website on different view
Currently this simulator works fine in Firefox, Safari and Chrome.
Incoming search terms: