<div class="device-size">
	<a id="switch-desktop" class="material-icons mdl-color-text--grey-600 switch-size switch-active" href="#">laptop</a>
	<a id="switch-tablet" class="material-icons mdl-color-text--grey-600 switch-size" href="#">tablet_android</a>
	<a id="switch-mobile" class="material-icons mdl-color-text--grey-600 switch-size" href="#">smartphone</a>
</div>
<iframe id="desktop-size" src="https://tfirdaus.github.io/mdl/grid/index2.html" frameborder="0"></iframe>
body {
	overflow-y: hidden;
}
iframe {
	height: 400px;
	margin-bottom: 120px;
	margin-right: auto;
	margin-left: auto;
	overflow: scroll;
}
.device-size {
	padding: 15px;
	margin-bottom: 10px;
	width: 100%;
}
.device-size a {
	text-decoration: none;
	margin-right: 6px;
	margin-left: 6px;
	opacity: 0.5;
}
.device-size a:hover,
.device-size .switch-active {
	opacity: 1;
}
#desktop-size {
	width: 960px;
}
#tablet-size {
	width: 800px;
}
#mobile-size {
	width: 400px;
}

.mdl-cell {
	padding: 20px;
	background-color: #f3f3f3;
}
(function($) {
		var $iframe = $('iframe');
		var $switch = $('.switch-size');

		$switch.on('click', function() {
				var $this = $(this);

				if ($this.hasClass('switch-active')) {
						return;
				} else {
						$switch.removeClass('switch-active');
						$(this).addClass('switch-active');

						// id
						var $id = $this.attr('id');
						var $class;
						console.log($id);
					
						switch ($id) {
								case "switch-tablet":
										$class = "tablet-size";
										break;
								case "switch-mobile":
										$class = "mobile-size";
										break;
								default:
										$class = "desktop-size";
						}
						
						$iframe.attr('id', $class);
				}

		});

})(jQuery);

External CSS

  1. //fonts.googleapis.com/icon?family=Material+Icons
  2. //storage.googleapis.com/code.getmdl.io/1.0.1/material.teal-red.min.css

External JavaScript

  1. //storage.googleapis.com/code.getmdl.io/1.0.1/material.min.js
  2. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js