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

解決済みの質問

ホームページビルダー作成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

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

投稿日時 - 2013-07-21 21:04:19

QNo.8186026

すぐに回答ほしいです

質問者が選んだベストアンサー

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

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

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


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

投稿日時 - 2013-07-22 00:28:00

お礼

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

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

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

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

投稿日時 - 2013-07-22 13:12:22

ANo.2

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

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

-広告-
-広告-

回答(2)

ANo.1

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

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

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

投稿日時 - 2013-07-21 23:49:21

お礼

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

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

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

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

投稿日時 - 2013-07-22 13:13:24

-広告-
-広告-

あなたにオススメの質問

-広告-
-広告-