ホームページビルダー作成HPがiPhoneでズレる

ホームページビルダーのフルCSSテンプレートを元に作ったHPが、iPad、iPhoneのSafariで見ると、<h1>や<p>が、そのdiv幅の横半分くらいのところでなぜか勝手に折り返してしまい、レイアウトが崩れてしまいます。

PC版のSafariでは大丈夫なのですが、どこをいじれば直りますでしょうか？
いろいろやってみましたがわかりません。
下記がHPです。

http://www.ab.auone-net.jp/~pattiko/

同じテンプレートを使ったと思われるよそのHPもみんな同じように折り返しているので、そもそものビルダーのCSSがおかしいのだと思います。

http://www.wakaclinic.justhpbs.jp/
http://park7.wakwak.com/~tsmc.index/index.html

どなたか教えてください。よろしくお願い致します。

No.2 ベストアンサー 回答者： naokita 回答日時： 2013/07/22 00:28

＞CSSがおかしいのだと思います。

Ａ
おかしい訳ではなく、
方向性によって違うのだから、見せ方に正解はないです。
スマホ側の仕様です。
ディスプレイの幅で見せる、いや、読ませる為ですよ。
iOS系以外もだけどね。アンドロイドとか。

body{
-webkit-text-size-adjust:100%;
}


meta viewport も調べると面白いかも。

この回答へのお礼

さっそくのお返事ありがとうございます。

body{
-webkit-text-size-adjust:100%;
}
だけではダメでした。

meta viewport調べました。metaに書いて、さらにスマホ用CSSを書くということですね。調べているうちに、<p>が320pxくらいで折り返してしまうというのがよくわかりました。

時間がかかると思いますが、がんばってスマホ用CSSを作ってみます。ありがとうございました。

お礼日時：2013/07/22 13:12

No.1 回答者： metametamu 回答日時： 2013/07/21 23:49

iphoneは詳しくないのであてにならないかもしれませんが、自動調整機能が悪い方向に働いている可能性があるかもしれません。

body{
-webkit-text-size-adjust:100%;
}

これをcssに記述してみてください。

この回答へのお礼

さっそくのお返事ありがとうございます。

body{
-webkit-text-size-adjust:100%;
}
だけではダメでした。

さらにNo.2さんのアドバイスで、meta viewport調べました。metaに書いて、さらにスマホ用CSSを書くということですね。調べているうちに、<p>が320pxくらいで折り返してしまうというのがよくわかりました。

時間がかかると思いますが、がんばってスマホ用CSSを作ってみます。ありがとうございました。

お礼日時：2013/07/22 13:13