RSS | ATOM | SEARCH

ねえどうしてレスポンシブルでいてくれないの?【@media指定とViewportの関連性】

シミー合同会社ウェブサイト(PC)

このブログの体裁を調整したのに引き続いて(過去記事)、会社のウェブサイトを自称“今っぽく”することにしました。でも途中で、ちょっとしたトラブルが。

スマホで表示した際に、スマホ用の表示に切り替わってくれないという不始末(という不手際)です。

言い換えると、「せっかくの@media指定が適用されないじゃんか、キーッ」という状態になってしまいました。

 

ねえ何したいの、なトラブルでしたが、いや、ほんと、終わってみればそんなことだったとは……

スマホで見てもらうこと=ウェブサイトを見てもらうこと

さてさて、「スマホフレンドリーなウェブサイトを」だなんて言葉が陳腐化してしまうほどに、ここ数年でスマホやタブレットなどの携帯端末で検索、閲覧する機会が増えました

実際、いちユーザとしてググったりなんかして、スマホでウェブページを開いた時に『PC向けの体裁』で表示されようものなら、思わず閉じてしまうこともしばしば。タブレットならまだしも、スマホでPC向けのウェブサイトを閲覧する理不尽さったらありません。

そんなこんな、スマホで快適に表示させるということは、もはやそれで当たり前のことになってしまっています。

基本的な手順をおさらい

それをせずに、作業が抜けていたことがすべての原因です、ハイ。

  1. cssの@media指定で指定の幅以下になった際にスマホと判定して、スマホ用のcssが適用されるようにする

以上、でこのザマですよ。

正しい手順はこちら

シミー合同会社ウェブサイト(モバイル)
  1. メタタグにビューポート指定をして、「このページはあなたのふるまう画面サイズが重要なのでよろしくです!」と一言告げておく
  2. cssの@media指定で……

そして、無事解決です。

こちらの記事に、大変お世話になりました。ありがとうございます!

というわけで、実際には、ウェブサイトのメタタグにこんな記述を追加しました。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

問題は解決しましたが、今後のためにもう少し掘り下げてみます。

device-widthとinitial-scaleについて

上記の記述のwidth属性で、

  • device-widthはスマホ自身が”考える”画面の幅
  • initial-scaleは初期の表示倍率

です。

device-widthのスマホ自身が考える画面幅、とは何でしょうか。

これは、言い換えるとスマホが主張する(自ら認識する)画面幅とは、液晶画面のドット数ではないということです。

私はcssを作り込む際にはピクセル幅ではなく%幅で考えることが多いので、これと合わせることで、

「スマホよ、あなた自身が考える100%幅でこのページを表示してちょうだい」

という指定になるのだと理解しています。

拡大縮小表示への対応

タッチパネルスクリーンであるスマホの画面は、ピンチ操作をすることで拡大縮小の表示ができるわけですが、まずはこの初期値を明示することで、

  1. (スマホが振る舞いたい)ピクセル相当の等倍で表示
  2. css内の@media指定で幅を判定
  3. スマホ用の表示が適用

となるようですね。

いくつかビューポート指定のwidth属性を調べてみると、maximum-scale=1.0や、minimum-scale=1.0などの記述も見当たります。これらのメリットとして、初期値と拡大縮小の限界値を揃えることで、より製作者の意図した表示にさせることが期待できます。

今回の私のケースではこの指定を見送りましたが、その理由としては、逆に、意図しないユーザビリティの低下を招きたくないなということが大きくあります。シンプルな普通のHTMLなので、サイズ上縮小こそされないであろうとも、多少の拡大は許容しておくべきかなと。

cssの使い分け

今回の会社サイトも、前回のJUGEMブログのテンプレートも、同一のcssファイル内に@media指定のスタイルを追加しました。表示されるデバイスごとにcssを使い分けたい場合は、メタタグ内で条件分岐をさせる形になりますね。基本的なことは以下の記事が参考になります。

そういえばこのあたりのメタタグ、「印刷された時に別のレイアウトで印刷させると素敵よね」などと10年以上前に思っていた以来の注目株。

私は細かい指定を駆使するよりは、ざっくりそこそこに表示分けがなされればよいと考えていますので、よほど世の中の表示環境が変化しない限りは、media="print"で印刷用表示を充実させるくらいでしょうか。

実は以前の記事で忘れていたこと

今回は、なぜ自分の以前のブログ記事と同じ手順で進めていったのに、こんな事になったのだろうと、まず思ったわけです。

くだんのJUGEMブログのテンプレートでレスポンシブデザインにした記事では、そういえばcssへの@media指定にしか触れていないことに気が付きました。しかし、JUGEMブログのテンプレートを確認すると、メタタグには今回苦しんだ設定がしっかりとなされている……

そう、記事を書く際にメタタグへの記述もしましょうねの部分が抜け落ちてしまっていました

ご覧になっていただいた方、ごめんなさい!

いずれにしても、あらためてHTMLとcssの兼ね合いってシンプルだけど、シンプルだけに、奥が深いなと思わされた一幕でした。

カテゴリ:[ICT]ウェブサイト, comments(0), trackbacks(0)
Comment









Trackback
url: http://shimmy.jugem.jp/trackback/95