昔からiPhoneで見ると崩れる事には気づいていた。会社のMBPで見ても崩れることに気がついた。 対応することにした。

問題は2つあった。

MBP, iPhoneで表示すると文字が巨大化する

tinkererの標準テンプレート(minimal5)を使っていたのだけど、そのcssで以下が指定されていた。 このメディアクエリを削除したら問題がなくなった。

1
2
3
4
5
6

@media screen and (-webkit-min-device-pixel-ratio: 2)
{
  body {
    font-size: 200%;
  }
}

メディアクエリについてはレスポンシブデザインはviewportとメディアクエリーからはじめよう！を参考にした。

iPhoneで左に寄って表示される

tinkererのテンプレートの大元にあるboilerplate/layout.htmlで指定されているviewportの設定がうまくなかった。 そこで以下を追記し元のviewport設定を削除した。

1

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

追記による多重定義ではiPhoneのChromeでは解決するがSafariは解決しない。 そのため、多重定義ではなく正しい定義で上書きすることにした。 元の定義はboilerplate/layout.htmlに直接書かれているので該当要素は継承しても変更できない。 そこで、プロジェクトディレクトリに同じ名前で配置して要素部分だけ上書いた。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

  vimshell% tree _themes
  _themes
  ├── boilerplate
  │       └── layout.html
  └── orig-minimal5
             ├── layout.html
             ├── social.html
             ├── static
             │       └── minimal5.css_t
             └── theme.conf

今回はやっつけ対応だけど、ちゃんとやるには下が参考になりそう。

• viewportの解説
• なんか綺麗にまとまっているスマホ対応