スマートフォンサイトを作ろう!(8)viewport、そしてまた修正

0
    JUGEMテーマ:wordpress

    終わったはずのシリーズに何故かまた投稿。

    それは、
    どうしても納得がいかなかったんです。
    なぜ、フォントサイズを48pxなんて大きな値にしないとちゃんと見えないのか。
    なぜ、シミュレータと実機であそこまで見栄えが違うのか。
    最初のあの文字の小ささ、あれじゃまるでPCサイトみたいじゃないか。





    そう思ったときに天啓が降りてきたのです。


    そうか、PCサイトだと思われていたのか!
    そういえば、私はスマホサイトですとブラウザに言った覚えは全然ないぞ。
    PCサイトは確か画面幅を980pxとして表示するとかどこかにかいてあったし。
    あの設定はどこでやるんだ!??

    そう思って調べたら出てきました。viewportです。

    viewportとは、スマホ特有の概念で、言ってみればブラウザの中にもう一つ仮想的なブラウザを作って表示している、という感じでしょうか。スマホのブラウザの中に980pxをぎゅっと縮めて押し込めているのです。これによりスマホでPCサイトの全貌を眺めることができるようになっているのです。このviewportの幅の設定がデフォルトのまま980pxになっていたのです。

    やるべきことは、次の1行をヘッダに入れてやることです。

    <meta name="viewport" content="width=device-width">

    これは、ブラウザの表示幅を実際のデバイスの幅に合わせなさい、という意味になります。
    早速やってみましょう。

    出た〜!出ました。全部の文字がでかでかになって出ました☆

    あぁ、ということはこれからまたレイアウト見ながら再調整か・・・まあ、仕方ない。

    まずはhtml,bodyのfont-sizeを16pxに戻します。これで文字サイズが1/3になって、980px→320〜360pxに対応してくれるはずです。
    出ました、出ました。うーん、もう少し字が大きくてもいいかな、とも思いますが、見出しのサイズなんかはまあいい感じなので、基準はこれで決めて、あとは要すればpタグにフォントサイズを与えていけばいいかな、と思います。

    で、あとは、いじってしまった画像サイズやメニューボタン、コメント枠などを順次修正していきます。
    といっても、ちまちまちまと直していくと、割と簡単に直りました。

    出来上がりはこちら
    ペーパークラフトが好きなんです
    ぜひ、スマートフォンでもご覧ください。


    ではでは、今度こそ本当にシリーズ終了です。
    ご清聴ありがとうございました。
    近いうちにまた次のシリーズでお会いしましょう。


    コメント
    コメントする








       

    calendar

    S M T W T F S
         12
    3456789
    10111213141516
    17181920212223
    24252627282930
    << November 2019 >>

    アクセスカウンタ

    合計:
    今日:
    昨日:

    selected entries

    categories

    archives

    recent comment

    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      てちくん
    • ホームページをリニューアルするの巻(19)−Googleウェブサイト翻訳ツールを組み込む
      小田きく江
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      てちくん
    • ロリポブログでGoogleにサイトマップを登録する際の注意事項
      suraugi
    • いそべぇのペーパークラフトを作る(初級編)(12)
      てちくん
    • いそべぇのペーパークラフトを作る(初級編)(12)
      だべえ
    • noomでマイナス12kgのダイエットに成功!
      Yoko

    recommend

    recommend

    recommend

    ドール デザートメーカー ヨナナス901
    ドール デザートメーカー ヨナナス901 (JUGEMレビュー »)

    結構高いんです、でも欲しいんです!

    links

    profile

    書いた記事数:173
    最近の更新日:2017/01/30

    search this site.

    others

    mobile

    qrcode

    powered

    無料ブログ作成サービス JUGEM

    Google Adsense

    楽天ブックス

    楽天