【レスポンシブ】pcの画面レイアウトをタブレットでも表示する方法

2016年11月8日

pc、sp、タブレット表示を、すべてレスポンシブでコーディングする際にviewportを下記のように指定していたが、タイトルにもあるように、pcの画面レイアウトをタブレットでも表示したい場合には表示が上手くいきません。

結論をいうと、viewportの指定を次のように書くとタブレット画面でもPCのレイアウトが表示できます。

これで、タブレットでもPCレイアウトを表示できるのだが、今一度、レスポンシブに関する属性と値についてみていきましょう。

レスポンシブ時のhtml宣言について

meta name=”viewport”ビューポート、表示領域。

content=”width=device-width”直訳すると「幅はデバイスの幅」ということ。表示している端末、ブラウザの幅になる。

content=”initial-scale=1.0″初期表示の拡大率。
上記の1.0は、端末、ブラウザの幅に関係なくcssで指定した幅で表示。

content=”user-scalable=no”スマホ、タブレットでの表示時に指で拡大縮小（ピンチイン・ピンチアウト）ができないようにする。
拡大縮小できるようにするには、”user-scalable=yes”にするとよい。

上記のように、
レスポンシブでコーディングする際には、name属性にはviewportのみでよいが、content属性にいくつか指定できる値が出てきます。
そして、今回initial-scale=1.0を外したことで、pcの画面をタブレットでも表示することが可能になりました。

スポンサードサーチ

まとめ

冒頭で、上のように書きましたが、今回の目的であるpcの画面レイアウトをタブレットでも表示するのには、普段レスポンシブの際に書いているinitial-scale=1.0が不必要だったということです。
initial-scale=1.0を指定することで、端末、ブラウザの幅に関係なくcssで指定した幅で表示されるので、pcサイズで指定しているwidth通りに表示されていたということになるようです。

もしかしたら、他にもっと適切な方法があるかもしれませんが、ひとまずこれでpcの画面レイアウトをタブレットでも表示することができます！