技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

技術と経験で、価値のあるホームページ制作を。ホームページ制作を通じて、お客様に利益をもたらすことを追求します。

ブログ

名古屋のホームページ制作会社 花のや > 花のやブログ > PCとスマホでViewportを切り分ける方法
2016/08/19プログラミングJavaScript

PCとスマホでViewportを切り分ける方法

暑いですね、汗だくです、花岡です。

みなさまのご愛顧により、毎日忙しい日々を過ごせています。
本職はディレクターなのですが、営業とコーダーも兼務しちゃっている状態です。
最近は猫も杓子もレスポンシブです。
ただレスポンシブもPCとスマホだけなら可愛いもので、スマホとタブレットとPCってなると股間がヒュッってなります。

これの対処にはviewportを「端末毎に」切り分けるjsを書いてしまうと楽ちんです。

navigator.userAgent

navigator.userAgentを使えばユーザエージェント情報に沿った処理をさせることができます。
例えばiPhone/iPad/Android毎の場合はこちら。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20type%3D%22text%2Fjavascript%22%3E%0A%2F%2F%20iPhone%0Aif%20(%20navigator.userAgent.indexOf('iPhone')%20%3E%200%20)%7B%0A%2F%2F%20iPad%0A%7D%20else%20if(%20navigator.userAgent.indexOf('iPad')%20%3E%200%20)%7B%0A%2F%2F%20Android%0A%7D%20else%20if(%20navigator.userAgent.indexOf('Android')%20%3E%200%20)%7B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

これを使ってviewportをPC・タブレットとスマホで分岐させます。

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0Avar%20ua%20%3D%20navigator.userAgent%3B%0Aif%20((ua.indexOf('iPhone')%20%3E%200)%20%7C%7C%20ua.indexOf('iPod')%20%3E%200%20%7C%7C%20(ua.indexOf('Android')%20%3E%200%20%26%26%20ua.indexOf('Mobile')%20%3E%200))%20%7B%0A%20%20%20%20%2F%2F%20%E3%82%B9%E3%83%9E%E3%83%9B%E3%81%AE%E3%81%A8%E3%81%8D%0A%20%20%20%20%24('head').prepend('%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3Ddevice-width%2Cinitial-scale%3D1.0%22%3E')%3B%0A%7Delse%7B%0A%20%20%20%20%2F%2F%20PC%E3%83%BB%E3%82%BF%E3%83%96%E3%83%AC%E3%83%83%E3%83%88%E3%81%AE%E3%81%A8%E3%81%8D%0A%20%20%20%20%24('head').prepend('%3Cmeta%20name%3D%22viewport%22%20content%3D%22width%3D980%2C%20maximum-scale%3D1.0%2C%20user-scalable%3Dyes%22%20%2F%3E')%3B%0A%7D%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

viewportの分岐ができると、他の処理でも応用が効くので便利です。

書いた人:hanaoka

林業高校出身後、インテリア学科に進学して、土方監督からCADオペを経てWebディレクターになりました。
Webディレクターとして皆様のお悩みを解決します。Web制作とガジェットが好きです。特技は少年ジャンプを縦に裂くことです。

人気記事ランキング

株式会社 花のや
〒460-0011
愛知県名古屋市中区大須4-1-79 第2ハヤシビル 3F

花のやについて

お仕事のご依頼やご相談は、下記の電話番号
または、メールフォームよりお問い合わせください。
TEL.052-251-7090 / FAX.052-251-7092

お問い合わせ