Phoneawesome

Best Way to Create Phone Display on HTML Pages

I have published PhoneAwesome last week. It's a library to create a phone display on HTML. It can use for sharing the mobile display of any themes or applications. It's based on Device.css. I used Javascript and Webpack to build Phoneawesome.

## Install

You can get Phoneawesome with CDN.

<script src="https://cdn.jsdelivr.net/gh/omerimzali/phoneawesome@master/dist/build/phoneawesome.js"></script>

Or You can clone it.

git clone https://github.com/omerimzali/phoneawesome.git

## Usage

1. Creating a Device.

<div id='device1'></div>
var options = {src:"https://picturepan2.github.io/spectre/"};
var device1 = phoneawesome('#device1',options);

2. Changing Device Modal

<div id='device2'></div>
var options = {device:"google-pixel-2-xl",
src:"https://picturepan2.github.io/spectre/"};
var device2 = phoneawesome('#device2',options);

3.Device Sizes

<div id='device2'></div>
var options = {device:"iphone-8",width:"400",height:"600",
src:"https://picturepan2.github.io/spectre/"};
var device5 = phoneawesome('#device5',options);

4.Change src

var device6options = {device:"iphone-8",width:"400",height:"600",
src:"https://picturepan2.github.io/spectre/"}; 
var device6 = phoneawesome('#device6',device6options);

device6.changesrc("https://nostalgic-css.github.io/NES.css/"); 
//or 
device6.changesrc("https://picturepan2.github.io/spectre/");

Device Support

PhoneAwesome can create galaxy-s8, iphone-x, google-pixel, google-pixel-2-xl and iphone-8

## Browser Support

Phoneawesome tested on the following browsers.

• Chrome
• Firefox
• Safari
• Opera

https://github.com/omerimzali/phoneawesome
http://programlama.xyz/phoneawesome/examples/index.html
http://programlama.xyz/phoneawesome/examples/portfolio.html