"Quick Emulator"
Bootstrap 3.3.0 Snippet by tjhall13

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<input id="width" type="text" value="320">
<input id="height" type="text" value="548">
<button id="resize">Resize</button>
<div class="wrapper" style="width: 320px; height: 548px;">
<div class="phone-body">
<div class="phone-area">
<!-- Your code here -->
<div>
<div class="center">
<img src="http://lorempixel.com/people/420/420/">
</div>
</div>
<!-- End code -->
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body {
padding: 10px;
background: #aaa;
}
.wrapper {
position: absolute;
top: 40px;
left: 40%;
}
.phone-body {
border: 10px solid black;
border-radius: 10px;
width: calc(100% + 20px);
height: calc(100% + 20px);
}
.phone-area {
width: 100%;
height: 100%;
background: #fff;
overflow-y: auto;
overflow-x: hidden;
}
.center {
width: 80%;
margin: auto;
}
.center > img {
width: 100%;
}
.center:before {
content: '';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
$(function() {
$('#resize').click(function() {
var width = $('#width').val();
var height = $('#height').val();
var style = 'width: ' + width + 'px; height: ' + height + 'px;';
$('.wrapper').attr('style', style);
});
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Navbar With Icons
eCommerce Quick view Popup & Product row
Quick Contact
Admin Panel Quick Shortcuts

Questions / Comments: