<select id="resolution">
	<option value="mobile">480x320 Mobile</option>
	<option value="smallTablet">800x600 Small Tablet</option>
	<option value="tablet">1024x768 Tablet</option>
</select>
<button id="orientation">Orientation</button>
<input type="url" value="http://adonisk.com">
<button id="result">go</button>
<iframe class="landscape"></iframe>
iframe {
	transition: 150ms ease;
	display: block;
	margin: 0 auto;
	background-color: #333;
	border: none;
}
.mobilePortrait {
	height: 480px;
	width: 320px;
}
.mobileLandscape {
	height: 320px;
	width: 480px;
}
.smallTabletPortrait {
	height: 800px;
	width: 600px;
}
.smallTabletLandscape {
	height: 600px;
	width: 800px;
}
.tabletPortrait {
	height: 1024px;
	width: 768px;
}
.tabletLandscape {
	height: 768px;
	width: 1024px;
}
/* styling */
 html {
	min-height: 100%;
	background: radial-gradient(circle, #fff 0%, #aaa 100%) no-repeat;
}
body {
	text-align: center;
}
input, select, button {
	margin: 1em 0 1em 1em;
	padding: 0.5em;
}
$(function () {
	var selected = {};
	selected.device = "mobile";
	selected.orientation = "Landscape";
	selected.url = "http://adonisk.com";
	$("iframe")
		.addClass(selected.device + selected.orientation)
		.attr("src", selected.url);
	$("#result").on("click", function () {
		$("iframe").attr("src", $("input").val());
	});
	$("#resolution").change(function () {
		$("iframe").removeClass(selected.device + selected.orientation);
		if ($(this).val() === "mobile") {
			selected.device = "mobile";
		} else if ($(this).val() === "smallTablet") {
			selected.device = "smallTablet";
		} else if ($(this).val() === "tablet") {
			selected.device = "tablet";
		} else {
			selected.device = "mobile";
		}
		$("iframe").addClass(selected.device + selected.orientation);
	});
	$("#orientation").on("click", function () {
		$("iframe").removeClass(selected.device + selected.orientation);
		if (selected.orientation === "Portrait") {
			selected.orientation = "Landscape";
		} else {
			selected.orientation = "Portrait";
		}
		$("iframe").addClass(selected.device + selected.orientation);
	});
});
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js