Display a Website in an iPhone with HTML, CSS, and JavaScript

December 5th, 2014

While browsing some blogs, I saw a post that had a really cool way of displaying preview of a web app within an iPhone image. The site app being displayed was responsive, so by matching the CSS resolution of an iPhone screen, they were able to display the mobile version of the site perfectly. I thought this would be a really cool thing to create a script for, and I took it a step further by adding left and right perspectives as well three color choices.

What is it exactly? Check it out

iPhone Preview

That's a real web page in the iPhone image. Go ahead and try interacting with it.

Choose from the black, white, and gold versions of the iPhone 6.

Don't like the left perspective? There's a front and right facing one, too.

Easy jQuery-like initialization.

Scrollbars modified for webkit browsers to resemble track and thumb of iPhone.

Coded in vanilla JavaScript, no library dependencies.

This can be used to showcase a web application, give demos, etc. View the full demo and download below.

Demo View Source Download zip GitHub

How it Works

Each perspective is saved as an image. These images were scaled to match the true CSS resolution of the iPhone 6. A wrapper div is then created to house the entire preview. This wrap is needed since we use a CSS transform function called scale() to change the width and height of the preview (using the real width and height would cause the dimensions to be untrue). When using the scale function, however, the original width and height will still be present in terms of the space it takes up on the page, even if the new size is smaller than the original. To counteract this, the wrap div is resized to the proper width and height, and its overflow is set to hidden to hide the extra space.

Inside the wrap div is another div that holds the image of the phone as well as the iframe. When showing the front facing version of the phone, CSS transformations are not applied. To show the page properly on both the left and right facing versions, the matrix3d() transform function is used.

Usage

Download the zip file containing the script and iPhone images and upload them to your server.

Place the script on your page.

<script type="text/javascript" src="biomp.js"></script>

Create a div element, which will contain the preview.

<div id="preview"></div>

Initialize a new bioMp object using the div.

Vanilla JavaScript

bioMp(document.getElementById('preview'));

jQuery

bioMp($('#preview'));

You must include options such as an image and viewing perspective for the preview to show correctly. This is shown in the next section.

Options

All options must be added to the init function as an object.

Name	Type	Default	Description
url	string	blank	URL of the web page to preview.
view	string	front	The perspective of the phone. Possible values are front, left, and right.
image	string	blank	URL of the image to use for the phone. A total of 9 images are included with this script.
scale	float	1	Resize the phone preview by a multiplier value. For instance, a value of 1 is full size, while 0.5 would half the size. If this option is set, both width and height options are ignored.
width	integer	428	The width of the phone in pixels. If this option is set, the height option is automatically set to proportion. If scale is not set, it will be automatically set to proportion as well.
height	integer	889	The height of the phone in pixels. If this option is set, both the scale and width options are ignored and automatically set to proportion.

For example, to create a left facing preview for beeker.io on the gold iPhone, you would initiate the preview div in the usage example with these options.

bioMp(document.getElementById('preview'), {
    url: 'http://beeker.io',
    view: 'left',
    image: 'images/iphone6_side_left_gold.png'
});

Check out the demo to see examples.

Credits

Thank you to JustD for the images of the iPhone 6. You can find his work here on Behanced.

License

Licensed under MIT