問題点 (Issue)

iPhone 6/6 Plus で、記事内の HTML コンテンツおよびエンタイトルメントバナーが、画面サイズにフィットして表示されません。

理由 (Reason)

この問題は、iPhone 5 向けなどに固定値が指定されている HTML コンテンツで発生します。

解決方法 (Solution)

デバイスによってディスプレイサイズは異なります。様々なディスプレイサイズに対応するには、固定のピクセル値(例: width: 320px など)ではなくパーセント(例: width: 100% など)でコンテンツの幅を指定する必要があります。

また、以下の順序で CSS の media 属性を記述することにより、この現象を回避できる可能性がありますが、必要に応じて縦横比や固定値などを指定してください。

@media all and (max-height: 480px) {', // iPhone 4 (non-retina) or lower 

@media all and (max-height: 480px) and (-webkit-min-device-pixel-ratio: 2) {', // iPhone 4 retina

@media all and (device-aspect-ratio: 40/71) {', // iPhone 5      

@media all and (max-height: 480px) and (-webkit-min-device-pixel-ratio: 2) {', // iPhone 6+      

@media all and (min-height: 481px) {', // browser testing (above 480px)

追加情報 (Additional Information)

弊社担当部門では、対象となる HTML コンテンツをスキャンするツールの提供に向けて、調査を進めています。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー