鱒身(Masu_mi)のブログ

知った事をメモする場所。

iPhone, MBPでの表示崩れ対策

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

現象は2つあった。

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

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

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

参考

メディアクエリについて書かれていた。

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

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

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

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

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

参考

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

  • viewportの解説 <http://ipn3g.com/web/study3.html>
  • なんか綺麗にまとまっているスマホ対応 <http://tech.nitoyon.com/ja/blog/2013/02/15/viewport/>