- 締切済み
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指定が大きすぎることが原因でしょうか。しかし、通常はそれでも最適化（縮小）されると思うのです。 ご回答、どうぞよろしくお願いいたします。
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- too_bad
- ベストアンサー率53% (70/130)
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://0843.co.jp/aclub/momentary/2013test/ これをiPadで見ると、何故かテキスト右側にマージンが空かず、フリックすると画面全体が左右に動いてしまいます。（上部の青空の背景は、水平方向に繰り返しています） Yahoo!のように、左右にマージンを空けつつ、スクロールは縦方向だけに固定したいのですがどうしたら良いでしょうか。 教えてください。
補足
こういうサイトを目指しています。 http://www.zakzak.co.jp/entertainment/ent-news/news/20121229/enn1212292314006-n1.htm iPadで見ると、左右にマージンが空きます。