The new iPad Mini is out! For webmasters, that means one thing. Optimizing their website so that it looks good on the iPad Mini screen.
But what if you don’t want to buy an iPad Mini? No problem. Here is a free online tool that lets you test out your website without the need for a device.
The iPad Mini website simulator
This is a free and quick tool which simulates the screen size of the new iPad Mini.
It’s perfect if you want to test out how your website looks on the new iPad Mini (a 1024 x 768 viewport), but you don’t have access to a device. The tool works with responsive and non-responsive websites.
This is the same screen resolution as the original iPad and iPad 2.
At this stage the tool doesn’t take into account rendering differences in the Safari browser, or the extra UI elements on an iPad screen. However, you can rotate the screen to view your site in both portrait and landscape mode.
How the simulator works
Let’s take a walkthrough of how the simulator works.
The simulator itself is an HTML
<iframe>, which is a tag that embeds another web page inside a ‘frame’. The ‘i’ stands for inline, because it’s an inline element.
<iframe> tag takes a
That’s where the form comes in. The submit button has an
http:// is present, adds it in if not, and then pops the URL into the
There’s also a function which checks to see whether the Enter key has been pressed, which fires the same function as the submit button.
The rotate button fires a third function, which toggles a class for the
<iframe>. That class has a CSS rule that simply swaps around the values for width and height.
The sharing buttons are perhaps the one thing not custom created. The respective social networks all provide the code for these buttons on their website. Speaking of social buttons…
Share it with your friends
If you liked this tool, then make sure you use the sharing buttons on this page, or on the tool itself, to share it with your friends.
Have any questions regarding the creation of this tool? Let us know!
Recommended Training – Treehouse
Although this site recommends various training services, our top recommendation is Treehouse.
Treehouse is an online training service that teaches web design, web development and app development with videos, quizzes and interactive coding exercises.
Treehouse's mission is to bring technology education to those who can't get it, and is committed to helping its students find jobs. If you're looking to turn coding into your career, you should consider Treehouse.
Disclosure of Material Connection: Some of the links in the post above are “affiliate links.” This means if you click on the link and purchase the item, I will receive an affiliate commission. Regardless, I only recommend products or services I use personally and believe will add value to my readers.