iPhone6plusの横画面モードの画像乱れを解決

2016年5月7日2016年5月8日iPad/iPod/iPhone,Web-log・ココログ関連,WordPress,パソコン・インターネット,モバイル,携帯・デジカメ

WordPressのレスポンシブデザインテーマを作っています。気になっていたのが、iPhone6plusを横にして、ランドスケープ表示(横画面モード)にすると、アイコンの余白がおかしくなると言う問題がありました。Safariのバグかなぁと思って諦めていました。

縦画面だと、綺麗にアイコンが表示されています。

横画面にすると、アイコンの高さがおかしくなって、余分な部分が見えます。これは、アイコンのCSS sprite画像の切り出し高さが大きくなっているための様です。

• ブログの表示速度が上がりました(設定編) : プラスα空間 (2014年3月17日)

この挙動を色々観察していたら、横画面にした時にフォントサイズが変わる事に気がつきました。em指定とpx指定で挙動が変わります。指定方法の違いが原因かと思ったら、これも違いました。iPhoneでは、実際の文字サイズが12pxより小さくならない様に、自動調整されるみたいです。次のページの記載でわかりました。ありがとうございます。

• iPhone6とiPhone6 Plusのレスポンシブデザインを考える。サイズ＆解像度比較とメディアクエリー | 大阪のWeb制作屋 LAVISON

このため、アイコン周りのフォントサイズが自動調整され、切り出し高さも大きくなり、CSS sprite画像の余分な領域が表示されてしまっていました。フォントサイズの自動調整を止めるためには、必要なクラス部分に、次の指定をしなければならないみたいです。

p.post-meta {
    -webkit-text-size-adjust: 100%;
}

横画面でも、きちんと表示されるようになりました。

次のウェブページによると、100%と指定するのが正しいみたいです。ありがとうございます。

• -webkit-text-size-adjust: none を絶対に設定してはいけない理由 – てっく煮ブログ

解決しました。