Saved!

Responsive Website Test - cross device targeting - i9dyM7oj

Responsive Website Test cross device targeting

cross device targeting screen window resize

  
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">

<div id="" class="wrap">
	
	<center>
		<input type="text" name="url" id="url" value="http://codesheet.org/preview.php?id=ExNkutdO">
		<button  name="show" id="show" class="button" value="Show">Show</button><br>	
	</center>


	<center>
		<a href="javascript:return false;" onClick="resize('320','480')"><i class="fa fa-mobile fa-2x"></i></a> 
		<a href="javascript:return false;" onClick="resize('480','320')"><i class="fa fa-mobile fa-2x fa-rotate-90"></i></a>  
		<a href="javascript:return false;" onClick="resize('768','1024')"><i class="fa fa-tablet fa-3x"></i></a>  
		<a href="javascript:return false;" onClick="resize('1024','768')"><i class="fa fa-tablet fa-3x fa-rotate-90"></i></a>  
		<a href="javascript:return false;" onClick="resize('1280','802')"><i class="fa fa-laptop fa-4x"></i></a> 
		<a href="javascript:return false;" onClick="resize('1600','992')"><i class="fa fa-desktop fa-5x"></i></a> <br> 
			<select class="form-control" name="resize" id="resize">
				<optgroup label="Desktop">
					<option onmouseup="resize('800','600');"  >800x600</option>
					<option onmouseup="resize('1024','768');"  >1024x768</option>
					<option onmouseup="resize('1280','800');"  >1280x800</option>
					<option onmouseup="resize('1600','1400');" >1600x1400</option>
				</optgroup>
				<optgroup label="Tablets">
					<option onmouseup="resize('533','853');"  >Amazon Kindle HD</option>
					<option onmouseup="resize('768','1024');" >iPad - Portrait</option>
					<option onmouseup="resize('1024','768');" >iPad - Landscape</option>
					<option onmouseup="resize('1024','600');" >Samsung Galaxy Tab</option>
					<option onmouseup="resize('1024','800');" >Samsung Galaxy Tab II</option>
					<option onmouseup="resize('1280','720');" >Microsoft Surface Pro</option>
				</optgroup>
				<optgroup label="Smartphones">
					<option onmouseup="resize('320','480');" selected>iPhone</option>
					<option onmouseup="resize('320','533');" >Galaxy S3 Mini</option>
					<option onmouseup="resize('360','640');" >Galaxy S3 / S4 / HTC One</option>
					<option onmouseup="resize('480','800');" >Google Nexus S</option>
					<option onmouseup="resize('480','640');" >Samsung Galaxy S2</option>
					<option onmouseup="resize('360','640');" >Samsung Galaxy S3</option>
					<option onmouseup="resize('320','480');" >Nokia Lumia 920</option>
					<option onmouseup="resize('601','962');" >Galaxy Note 8</option>
					<option onmouseup="resize('320','240');" >Blackberry Curve</option>
				</optgroup>
				<optgroup label="Mobile">
					<option onmouseup="resize('176','144');" >Samsung Corby (176x144)</option>
					<option onmouseup="resize('360','640');" >Nokia N97  (360x640)</option>
					<option onmouseup="resize('240','320');" >Samsung Player MTV (240x320)</option>
					<option onmouseup="resize('360','640');" >Samsung Omnia HD (360x640)</option>
				</optgroup>
			</select>
	
	</center>

	<center>
		<div id="size" class=""></div><br>
	</center>
	
	<center>
		<div id="" class="iframe t">
			<iframe id="test" class="t"> </iframe>
		</div><br>
	</center>
	
</div>  
  
Meta
http://codesheet.org/placehold-img/?width=300&height=250&color=33aaff&text=&textcolor=

Quick add:

× Clear

Add Stylesheets

normalize.css
reset.css
nice.css
/> CodeSheet UI
Font Awesome
Bootstrap
Foundation
Animate

Add External JavaScript

jQuery 3.1.0
jQuery UI
Bootstrap
Angular

Add Google Fonts

Dosis
Exo+2
Lato
Lobster
Open+Sans
Open+Sans+Condensed
Oswald
Playfair+Display
Quicksand
Raleway
Rochester
Roboto
Roboto+Condensed
Roboto+Mono
Shadows+Into+Light
Ubuntu
Arvo
Indie Flower
Merriweather
Pacifico
Sedgwick Ave
Sedgwick Ave Display
html
css
js