iPhoneでブログをPC表示すると全体が縮小表示される場合の対処方法

更新
2012年10月12日(金)

PC表示しても全体が縮小表示されないようにする方法です。fc2blogのみならず、他のblogやウェブサイトでも可能な方法です。

概要

  1. iPhoneでの表示設定をblog側で調整し、縮小表示されないようにします。

  2. HTMLを編集し head 内に1行加えるだけです。

HTMLを編集

  1. HTML編集で、 title タグの1行上あたりに次のコードを追加します。

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  2. 以上です。

yamaさんへ (Before and After)

  1. 次のコメントから、以下のようになったと認識しています。

    両サイトとも崩れのほうはなくなったようですが 最初に表示される大きさが少しおかしいようです サイトタイトルがドアップで表示されます。そのあと画面を指で「ピンチアウト(縮小)」すれば、標準サイズになり点滅や崩れは今のところ大丈夫です
    2012年10月08日(月) 00:13 yama
  2. 上記コードを追加する前は次のような表示であったところ・・・

    121008-example-1.png
  3. 追加後は次のような表示になったのではないでしょうか。

    121008-example-2.png
  4. サイトタイトルがドアップで表示とのことから、yamaさんのiPhoneは4以前のiPhone 3GSかそれ以前のもの(解像度が320x480)と推定して上記画像を作成しました。こういう認識で合っていますか。

    ただ私が持っているのはiPhone4sです。
    2012年10月09日(火) 14:12 yama
  5. iPhone4sですと、次のような表示になったのではないでしょうか。

    121008-example-4.png
  6. 上の表示に補足説明を加えてみます。

    121008-example-3.png
  7. 上記コードを入れることで、液晶の画素数に応じて表示される部分が決まるようになる、ということです。

  8. yamaさんのサイトの横幅は1100pxなので、横640x縦960のiphone4sで全体を等倍で表示するのは不可能です。

  9. デフォルト設定では、ユーザーがピンチアウト(縮小)しなくてもいいように、縮小表示されていたのだと思います。つまり、iphone4sが横幅1100pxでもできるだけ表示しようとして、自動で縮小していたのです。

  10. 以上より、「縮小表示されていたのは、テンプレートやカスタムに問題があったからではなかった」と結論づけました。

  11. デフォルト設定の縮小表示か、上記コードを入れて画素数に応じた表示にするか、を選んでいただければと思います。他にも任意の横幅に設定できるようですので、以下のリンクをご覧いただき調整していただければと思います。

上記コードを追加する理由については、他サイトで詳述されています。日付は各ページの公開日もしくは最終更新日です(このページの公開日現在)。ありがとうございます。

以上です。

関連記事
(この一行は、各記事の最後に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)
スポンサードリンク
(この一行は、各ページ下部に固定表示するサンプルです。テンプレートを編集して削除もしくは非表示にしてください。)