みんなの「教えて(疑問・質問)」にみんなで「答える」Q&Aコミュニティ

こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

締切り済みの質問

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

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

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指定が大きすぎることが原因でしょうか。しかし、通常はそれでも最適化(縮小)されると思うのです。


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

投稿日時 - 2012-12-29 22:49:45

QNo.7867432

困ってます

このQ&Aは役に立ちましたか?

1人が「このQ&Aが役に立った」と投票しています

回答(1)

ANo.1

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>

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

投稿日時 - 2012-12-30 07:51:46

補足

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

http://www.zakzak.co.jp/entertainment/ent-news/news/20121229/enn1212292314006-n1.htm

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

投稿日時 - 2012-12-30 09:47:41

お礼

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

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

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

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

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

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

教えてください。

投稿日時 - 2012-12-30 09:44:26

あなたにオススメの質問