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.
Click here to try out the tool…
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.
The <iframe> tag takes a src attribute, which is normally specified in the code. But because it’s user-controlled, it uses JavaScript here.
That’s where the form comes in. The submit button has an onclick attribute, which fires a function in the JavaScript. Using jQuery, that function retrieves the URL you’ve typed in the text field, checks to see whether the http:// is present, adds it in if not, and then pops the URL into the <iframe>.
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.
All three of the JavaScript functions use jQuery, which is highly recommended if you want to build a web app like this. It will really make your life easier.
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!
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.
