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

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

ブログ

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

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

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

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

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

navigator.userAgent

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

<script type="text/javascript">
// iPhone
if ( navigator.userAgent.indexOf('iPhone') > 0 ){
// iPad
} else if( navigator.userAgent.indexOf('iPad') > 0 ){
// Android
} else if( navigator.userAgent.indexOf('Android') > 0 ){
}
</script>

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

<script>
var ua = navigator.userAgent;
if ((ua.indexOf('iPhone') > 0) || ua.indexOf('iPod') > 0 || (ua.indexOf('Android') > 0 && ua.indexOf('Mobile') > 0)) {
    // スマホのとき
    $('head').prepend('<meta name="viewport" content="width=device-width,initial-scale=1.0">');
}else{
    // PC・タブレットのとき
    $('head').prepend('<meta name="viewport" content="width=980, maximum-scale=1.0, user-scalable=yes" />');
}
</script>

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

書いた人:hanaoka

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

人気記事ランキング

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

花のやについて

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

お問い合わせ