Skip to content

Instantly share code, notes, and snippets.

@ytsutano

ytsutano/resize_viewport.html

Last active November 11, 2015 02:01
Show Gist options
  • Save ytsutano/fc5d9877643872db7b87 to your computer and use it in GitHub Desktop.
Save ytsutano/fc5d9877643872db7b87 to your computer and use it in GitHub Desktop.
Download ZIP
Bookmarklets to resize the viewport width.
Raw
resize_viewport.html
<!DOCTYPE html>
<html>
<head>
<title>Bookmarklets: Resize Viewport</title>
</head>
<body>
<h1>Bookmarklets: Resize Viewport</h1>
<h2>Bookmarklets</h2>
<ul>
<li><a href="javascript:void%20function(){if(w=parseInt(prompt(%22Width:%22),10),!isNaN(w)){for(m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}}();">Custom</a></li>
<li><a href="javascript:void%20function(){for(w=300,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">300</a></li>
<li><a href="javascript:void%20function(){for(w=400,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">400</a></li>
<li><a href="javascript:void%20function(){for(w=500,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">500</a></li>
<li><a href="javascript:void%20function(){for(w=600,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">600</a></li>
<li><a href="javascript:void%20function(){for(w=700,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">700</a></li>
<li><a href="javascript:void%20function(){for(w=800,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">800</a></li>
<li><a href="javascript:void%20function(){for(w=900,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">900</a></li>
<li><a href="javascript:void%20function(){for(w=1000,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">1000</a></li>
<li><a href="javascript:void%20function(){for(w=1100,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">1100</a></li>
<li><a href="javascript:void%20function(){for(w=1200,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">1200</a></li>
<li><a href="javascript:void%20function(){for(w=1300,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">1300</a></li>
<li><a href="javascript:void%20function(){for(w=1400,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">1400</a></li>
<li><a href="javascript:void%20function(){for(w=1500,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">1500</a></li>
<li><a href="javascript:void%20function(){for(w=1600,m=document.getElementsByTagName(%22meta%22),i=m.length-1;i%3E=0;i--)%22viewport%22==m[i].name%26%26m[i].parentNode.removeChild(m[i]);v=document.createElement(%22meta%22),v.setAttribute(%22name%22,%22viewport%22),v.setAttribute(%22content%22,%22width=%22+w),document.getElementsByTagName(%22head%22)[0].appendChild(v)}();">1600</a></li>
</ul>
<h2>Code</h2>
<pre>
// w = parseInt(prompt("Width:"), 10);
// if (isNaN(w)) return;
w = 1200;
m = document.getElementsByTagName('meta');
for (i = m.length - 1; i >= 0; i--)
if (m[i].name == 'viewport')
m[i].parentNode.removeChild(m[i]);
v = document.createElement('meta');
v.setAttribute('name', 'viewport');
v.setAttribute('content', 'width=' + w);
document.getElementsByTagName('head')[0].appendChild(v);
</pre>
<footer><p>Posted by: <a href="http://yutaka.tsutano.com>Yutaka Tsutano</a>.</p></footer>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment