Best Way to Create Phone Display on HTML Pages
PhoneAwesome is a Javascript Library to create phone display on web pages.
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
- Creating a Device.
<div id='device1'></div>
var options = {src:"https://picturepan2.github.io/spectre/"};
var device1 = phoneawesome('#device1',options);
- 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/");
Phoneawesome tested on following browsers.
- Chrome
- Firefox
- Safari
- Opera
You can fork the project and enter this commands in your terminal.
git clone https://github.com/YOUR_GITHUB_USERNAME/phoneawesome.git
cd phoneawesome
Phoneawesome Based on Devices.css, I have to thank to PicturePan2