iPadのSafariでサイトが右側にはみ出る

締切済

質問者：Chown
質問日時：2012/12/29 22:49
回答数：1件

いつもご丁寧な回答をありがとうございます。

iPad2を利用しています。

　通常、iPadやiPhoneのSafariでは、ウェブサイトの横幅が、機種によって最適化され、ちょうど良い解像度になります（横スクロールする必要がない）。

　しかし、私が自作しているサイトでは、なぜか右側がはみ出てしまい、すべて表示させるには、フリックしたり、ピンチインする必要が生じます。

　簡略したコードは次の通りですが、何が問題でしょうか。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>

<body style="background-image : url(cg/interface/hoge.gif);background-repeat : repeat-x;margin-top : 0px;margin-bottom : 0px;margin-left: 12px;margin-right : 12px;">
<div style="width:1200px;border:1px solid;">左右にマージンが空いて欲しい</div>

</body>
</html>

div要素のwidth指定が大きすぎることが原因でしょうか。しかし、通常はそれでも最適化（縮小）されると思うのです。

ご回答、どうぞよろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

最新から表示
回答順に表示

No.1

回答者： too_bad
回答日時：2012/12/30 07:51

max-widthやmin-widthを使用すれば解決できると思われます。

http://www.css-lecture.com/log/css/038.html
しかしその前に、根本的な部分から改善していきましょう。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML　4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title></title>
</head>

<body style="background: url(cg/interface/hoge.gif) repeat-x;margin: 0 12px">
<div style="max-width:1200px; min-width: 640px; border: 1px solid;">左右にマージンが空いて欲しい</div>

</body>
</html>

本当はこうじゃないほうが良いのですが・・・
とりあえずはということで。

この回答への補足

こういうサイトを目指しています。

http://www.zakzak.co.jp/entertainment/ent-news/n …

iPadで見ると、左右にマージンが空きます。

補足日時：2012/12/30 09:47

通報する

- 0
- 件

通報する

この回答へのお礼

年末のお忙しいときにありがとうございます。

なるほど、そういう方法もあるのですね。参考になります。

今回作っているサイトはこのようなものです。（テキストは、ネットから適当にコピーしたダミーです）

http://0843.co.jp/aclub/momentary/2013test/

これをiPadで見ると、何故かテキスト右側にマージンが空かず、フリックすると画面全体が左右に動いてしまいます。（上部の青空の背景は、水平方向に繰り返しています）

Yahoo!のように、左右にマージンを空けつつ、スクロールは縦方向だけに固定したいのですがどうしたら良いでしょうか。

教えてください。

通報する

お礼日時：2012/12/30 09:44

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！