2017/11/16

【決定版】タブレットでPCサイトを縮小表示をする方法

Category

HTML&CSSデザインや現場で使えるCSSの使い方をコンテンツとして公開しています

この記事は2017/11/16に公開した内容を2017/11/30に編集・追加しました。

【決定版】タブレットでPCサイトを縮小表示をする方法

レスポンシブ対応でホームページを制作する際に、iPadなどのタブレット端末ではPCサイトを縮小表示させたい場合があります。

metaタグのviewport・contentを正しく設定してタブレットで縮小表示させる方法を紹介します。

通常の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%ほどです。

どこまでの範囲をカバーすべきかを考えて実装するようにしましょう。

コンテンツに関する質問やご要望は

Facebook

Twitter

より受け付けております。

CONTACT

ホームページ制作 / グラフィック制作に関するご相談・無料お見積もり

ご相談・無料お見積もりはコチラ

ACCESS

ADDRESS

〒590-0103
大阪府堺市南区深阪南117番地 深阪矢谷ビル202号 営業時間 10:00-19:00 (土・日・祝定休)