山下寛人オフィシャルブログ

オイシックス株式会社 執行役員 システム本部長 山下寛人の公式ブログです。

ローカルファイルでviewport resizerを使う方法

レスポンシブの表示確認に便利な

viewport resizer。

ページの上の部分にスマホタブレット

形のアイコンが現れクリックすると

ブラウザのサイズが変わります。


これを使うにはページをサーバーに

アップしないといけません。

ローカルに置いてあるファイルだと

残念なことにちゃんと動いてくれません。

しかしやり方はあります。

こちらのページに書いてありますが

あまり詳しく書いてないので書いておきます。


私の場合はローカルのHTMLファイルに

以下のように記述を追加しました。

<div align="center">
<a href="javascript:void*1return false;d.write('&lt;!DOCTYPE HTML&gt;&lt;html style=&quot;opacity:0;&quot;&gt;&lt;head&gt;&lt;meta charset=&quot;utf-8&quot;/&gt;&lt;/head&gt;&lt;body&gt;&lt;a data-viewport=&quot;320x480&quot; data-icon=&quot;mobile&quot;&gt;Mobile (e.g. Apple iPhone)&lt;/a&gt;&lt;a data-viewport=&quot;320x568&quot; data-icon=&quot;mobile&quot; data-version=&quot;5&quot;&gt;Apple iPhone 5&lt;/a&gt;&lt;a data-viewport=&quot;600x800&quot; data-icon=&quot;small-tablet&quot;&gt;Small Tablet&lt;/a&gt;&lt;a data-viewport=&quot;768x1024&quot; data-icon=&quot;tablet&quot;&gt;Tablet (e.g. Apple iPad 2-3rd, Mini)&lt;/a&gt;&lt;a data-viewport=&quot;1280x800&quot; data-icon=&quot;notebook&quot;&gt;Widescreen&lt;/a&gt;&lt;script src=&quot;http://lab.maltewassermann.com/viewport-resizer/resizer.min.js&quot;&gt;&lt;/script&gt;&lt;/body&gt;&lt;/html&gt;')})(document));" class="css_btn_class">Viewport Resizer でレスポンシブを確認する</a><br />
</div>

よく見るとちょっと余計なものが混ざって

いますがすみません。

これでリンクが追加されるのでクリックすると

viewport resizerが起動します。

*1:function(d){if(self!=top||d.getElementById('toolbar'