スマホやタブレットのVIEWPORTを簡単に調べる方法

Sponsored Link


京都のWeb屋です。お墨付き!編集部とはサーバ設定のお仕事だけでオサラバの予定だったのですが、無償奉仕で記事を書かされています。

さて、Web制作では、メディアクエリー(Mediaqueries)を使って、ビューポート(VIEWPORT)に応じたCSSを適用することがあります。

特に、「レスポンシブWebサイト」を制作する場合は顕著です。

しかし、「ビューポート(VIEWPORT)」というのがよく分からないといった事例を見かけます。
そこで、今回はこれを簡単に覚えられるようにしてみましょう。

メディアクエリー(Mediaqueries)で使えるのはビューポート(VIEWPORT)


メディアクエリーはIE9以上で使えるCSSの指定を画面サイズに応じて切り替える技術です。

HTMLでも指定できますが、CSSで指定するのが一般的です。

/*602px以上用の記述*/
@media screen and (min-width: 602px) {

    // CSS code

/*@Media screen End*/
}

/*601px以下用の記述*/
@media screen and (max-width: 601px) {

    // CSS code

/*@Media screen End*/
}

かなりわかりづらいと思います。違いは「min/max」の記述部分と数値です。

「min」以上
「max」以下

「なんか逆じゃね?」と思われるかもしれませんが

(min)最小でもスクリーンサイズがこれだけあるもの = 以上
(max)最大でもスクリーンサイズがこれしかないもの = 以下

ということです。

しかし、もっとわかりづらいのがビューポート(VIEWPORT)でしょう。

スマホやタブレットのビューポート(VIEWPORT)を調べる方法


ビューポートはPCだと画面解像度とイコールなのですが、スマホやタブレットだとイコールではないのがややこしく、端末仕様書にも掲載されていません。

そこが一番わかりづらいとされているところです。

もう面倒くさいので、メディアクエリーで使う画面サイズがビューポートと覚えてしまって問題ありません。

このビューポートは自分で調べるのは非常にやっかいなので、あるWebサービスを使います。

2014-07-31_100914

Viewport Sizes
http://viewportsizes.com/

ビューポートを調査したい端末で、このWebサイトにアクセスします。

2014-07-31_101112

画面の下の方に「Want to help?」という項目があり、そこの「What’s your viewport size?」をクリックします。

2014-07-31_101426

すると、こんな感じで表示されます。
わたしのスマホの縦画面でのサイズは

「360x519」

なのです。

「え? もっと解像度ありますよね?」

と思っても忘れてください。あくまでも、メディアクエリーで使いたいビューポートサイズは、この値なのです。

ビューポート(VIEWPORT)は端末ごとに縦横でも数値が変わる


さきほどのはスマホの縦で見た場合の数値でした。これを横向きにしてみましょう。

2014-07-31_101741

「598x287」

さきほどの数字と全然違いますよね。

でも、よくよく考えてください。URL表示バーや時間が表示されていたり、メニューボタンもありますし、それが縦横で配置も変わります。

なので、ビューポート(VIEWPORT)は端末ごとに縦横でも数値が変わると覚えてしまってください。

ちなみに、Nexus7(2012)では
601x793
962x441

になります。

まとめ


数値を再度一覧にしてみます。

スマホ[縦]=360x519px
スマホ[横]=598x287px
Nexus7[縦]=601x793px
Nexus7[横]=962x441px

この端末だけで考えれば、Nexus7の横向き以上で見る場合は「PCサイズ」のWebデザインで見せたいという場合は

/*602px以上用の記述(スマホ[縦]=360x519px,スマホ[横]=598x287px,Nexus7[縦]=601x793px,Nexus7[横]=962x441px)*/
@media screen and (min-width: 602px) {

#container {
    margin: 15px auto;
    width: 960px;
}

/*@Media screen End*/
}

こんな感じで書いてあげれば良いことになります。
これだと、Nexus7[縦]で見た時の横サイズ「601px」を基準にして、それを含まない「602px」以上という指定をすることで、Nexus7の横向きで見た場合やパソコンなどで見た場合のCSSを指定することができます。

「これだと602pxの小さいサイズでもPC用Webサイトが表示されますよね?」

と思うかもしれませんが、もし横幅「602px」の端末があれば画面からはみ出ることになります。

ですが、それは「そういう端末で見ればね」ということになります。

ビューポート指定というのは、端末個々のビューポートとの兼ね合いを見ながら、考えていくことになります。

でも、だいたいは

スマホ[縦]=360x519px
スマホ[横]=598x287px
Nexus7[縦]=601x793px
Nexus7[横]=962x441px

この赤い部分が気になるところなので、「601以下」と「602以上」という記述がよく使うかもしれません。

/*602px以上用の記述*/
@media screen and (min-width: 602px) {

    // CSS code

/*@Media screen End*/
}

/*601px以下用の記述*/
@media screen and (max-width: 601px) {

    // CSS code

/*@Media screen End*/
}
Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。