このページの本文へ移動

blog

coding

PC向けサイトをiOS Safariで見たとき、背景画像の右端が描画されないことがある件

先日、PC向けサイトをコーディングして、自家用iPhone5で確認する機会があり、その際に背景画像がキッチリ端まで描画されていないことに気付きました。
いままで通りの組み方だとどうしても描画されない上、iOS Safariのシェア状況を考慮すると、これは無視できない。ということで、弊社コーディングガイドラインへの導入を検討中です。
今回はこの問題の解決方法を解説します。

目次

問題のスクリーンショット（iPhone5）

※初期表示から右にスクロールさせています。

問題のサンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SAMPLEPAGE</title>
</head>
<body style="margin:0; padding:0;">
<div style="background:url(bg.gif) repeat-x top;">
<div style="width:1200px;">
<br>
<br>
<br>
<br>
<br>
<br>
<p><img src="img.gif" width="1200" height="100" alt=""></p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
</div>
</body>
</html>

※iOS Safari（iPhoneやiPadなど）でご確認ください。PCでは再現しません。

原因と発生条件

このサンプルを作成するのに結構苦労しました。実際の案件で直面してるので確実に再現できるはずなのに…。
おかげで発生する条件がハッキリしました。

どうやらiOS Safariの仕様では「指定が無いなら横幅980pxで描画します」ということらしい。そこに横幅980pxを超えるコンテンツが入ると、溢れた背景部分が切れる。と。
では、その解決方法をご紹介します。

解決方法1　横幅980px以内でサイトを作成する

根本的には980px以内で作成されているサイトでは問題が発生していないはずです。一昔前に作成したサイトだと960pxで作成されているのが主流だったので、過去のサイトの場合、あまり気にしなくてもいいかも知れません。
フルハイビジョンの大画面モニタやらタブレットが普及しつつあり、デザインとして980px越えが当たり前になりつつある現在、この解決方法は通用しないですね。

解決方法2　viewportを設定する

これまでPC向けで作成する場合、通常はviewportは設定していませんでした。
幅固定の記述を指定してください。
<meta name="viewport" content="width=1200px">
リキッドレイアウトやレスポンシブにしないとダメな時はdevice-widthにしないとダメだったり、デバイスごとの分岐処理が必要だったりするので注意。

スクリーンショット（iPhone5）

コンテンツ全体がフィットし、さらに端までキッチリ描画されました。

解決方法2のサンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=1200px">
<title>SAMPLEPAGE</title>
</head>
<body style="margin:0; padding:0;">
<div style="background:url(bg.gif) repeat-x top;">
<div style="width:1200px;">
<br>
<br>
<br>
<br>
<br>
<br>
<p><img src="img.gif" width="1200" height="100" alt=""></p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
</div>
</body>
</html>

※iOS Safari（iPhoneやiPadなど）でご確認ください。PCでは再現しません。

解決方法3　CSSでmin-widthを設定

min-width: 1200px;
これによって背景画像は正常に描画されるようになりますが、viewportで幅を指定していないと、980pxのデフォルト設定が効き、表示上「横スクロールバー」が出る結果に。上記「解決方法2　viewportを設定する」を併用したほうがいいでしょう。
特に問題がなければ「解決方法2」だけでいいかも知れません。

スクリーンショット（iPhone5）

※初期表示から右にスクロールさせています。

解決方法3のサンプルソース

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SAMPLEPAGE</title>
</head>
<body style="margin:0; padding:0;">
<div style="background:url(bg.gif) repeat-x top; min-width:1200px;">
<div style="width:1200px;">
<br>
<br>
<br>
<br>
<br>
<br>
<p><img src="img.gif" width="1200" height="100" alt=""></p>
<p>ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>
</div>
</div>
</body>
</html>

※iOS Safari（iPhoneやiPadなど）でご確認ください。PCでは再現しません。

スマホ・タブレットが普及しつつある現状、これらの設定はこれから必須になりそうです。

Related Blogs