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

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、それぞれにストーリーがあります。
花のやはそれをサポートしながら、お客様の成長を隣で見ていたいのです。

一緒に悩み、考える。
つくるだけでなく、
そのあとの物語も、ともに。

どんな会社もサービスも、
それぞれにストーリーがあります。
花のやはそれをサポートしながら、
お客様の成長を隣で見ていたいのです。

ブログBLOG

名古屋のホームページ制作会社花のや
花のやブログ
PCとスマホでViewportを切り分ける方法

2016/08/19プログラミングJavaScript

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

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

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

navigator.userAgent

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

&lt;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="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" /&gt;

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

&lt;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="&amp;lt;script&amp;gt;" title="&amp;lt;script&amp;gt;" /&gt;

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