【決定版】タブレットでPCサイトを縮小表示をする方法
レスポンシブ対応でホームページを制作する際に、iPadなどのタブレット端末ではPCサイトを縮小表示させたい場合があります。
metaタグのviewport・contentを正しく設定してタブレットで縮小表示させる方法を紹介します。
INDEX
通常のviewport設定でははみ出してしまう
タブレットでPCサイトを表示させようとするとはみ出して表示されてしまう時には、viewportの設定はおそらく下記のようになっています。
<meta name="viewport" content="width=device-width">
なぜタブレットで表示するとはみ出してしまうのか?
問題は
content="width=device-width"
の部分。
通常スマホではdevice-width、つまりスマホの画面サイズを自動計算してPCサイトをそのまま縮小表示してくれます。
ただこれではテキストが小さすぎたり、ユーザーが使いにくいため、メディアクエリを指定しスマホ用にCSSを記述するわけです。
しかし、タブレットでは勝手が違います。
iPadなどのタブレットでは、その自動計算をせず960pxという値を返してしまいます。
近年のwebデザインでは1280px〜1920pxのフルスクリーンでコンテンツが表示されるため、960pxより外側ははみ出して表示されてしまいます。
CSSでコンテンツ幅をpx指定ではなく%などの相対指定で記述している場合は960pxを100%として認識するため、そのままでも縮小表示されます。
タブレットでのviwportの設定はどうすればいいのか?
サイトのコンテンツ幅が1280pxの場合は
<meta name="viewport" content="width=1280">
と記述すれば正しく表示されます。
タブレットの画面サイズを1280pxと見立てて表示してくれるので、そのまま縮小表示してくれます。
width=値
値の部分をPCでの表示サイズの値にしてください。
これで問題解決!!
かと思いきやまだダメです。
なぜならスマホでも画面サイズを1280pxと見立てて表示してしまうからです。
なので、ここからはJavascriptを使ってスマホでのviwportとタブレットでのviewportを切り分けて出力していきます。
Javascriptでスマホとタブレットのviewportを変更する
$(function(){ 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">'); } else { $('head').prepend('<meta name="viewport" content="width=1050">'); } });
細かい説明は省きますが、スマホの場合は4行目を出力し、それ以外のデバイスでは6行目を出力します。
上記の内容をheadタグ内か自分のスクリプト内に記述すればオッケーです。
headに直接記述
<head> <meta charset="utf-8"> <script type="text/javascript"> $(function(){ 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">'); } else { $('head').prepend('<meta name="viewport" content="width=1050">'); } }); </script> </head>
スクリプト内に記述
$(function(){ 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">'); } else { $('head').prepend('<meta name="viewport" content="width=1050">'); } });
をそのまま記述すればオッケーです。
注意点
上記の記述方法はどちらでも構いませんが、headタグ内に記述する際には、javascriptファイルに前に。
スクリプト内に書き込む場合は、一番最初に書き込むようにしてください。
javascriptは上から順番に読み込んで処理していくので、if文などによりスマホとPCで違うイベントを設定している場合、スマホを1280pxの画面と認識してしまいPCの処理が実行されたりします。
なので、必ず自分で書いた記述よりも先にviewport設定の処理が行われるようにしてください。
まとめ
タブレットをPCの縮小表示する際にはメリットデメリットがあります。
メリットはコーディング時間の削減（タブレット用のCSSを書かなくて済む）、クライアントの予算削減などです。
デメリットはユーザーがタブレットで操作しにくくなる、ということです。
hoverイベントなどが多いとタブレットではhoverという概念がないので、ユーザビリティが一気に低下します。
あくまで、制作する際にはクライアントの先にいるであろうユーザーがサイトに訪れた際に問題なく使えるかを考えるようにする必要があります。
タブレットからのアクセスはだいたい1%〜5%ほどです。
どこまでの範囲をカバーすべきかを考えて実装するようにしましょう。
コンテンツに関する質問やご要望は
より受け付けております。
