PCだと問題ないのですが、iPhoneで表示するとWEBページが少し小さくなり左寄りになります。。

Question

WEBサイトを自主制作しています。
初心者な質問ですみません・・。
どうしても上手くいかなくて質問させて頂きます。

パソコンで表示すると何も問題ないのに、スマホ（iPhone）で開くとレイアウトが崩れてしまいます。

こちら実際のスマホの表示の画像です。
うまくいっているページ

http://www.studio-swag.com/access/access.html

なぜか左よりになってるページ

http://www.studio-swag.com/news/news.html

こちらが自主制作しているWEBページです。
www.studio-swag.com

どうしても調べてもわかりません・・・。
アドバイス頂けたら幸いです。
宜しくお願いします。

Answer 1

オーディションエントリーフォーム
https://docs.google.com/forms/d/1BE28JFqyxxST7aHOV_B2TogkpITgkezrfiC_jCZlrL4/viewform

ここのURLが折り返されずにコンテナを押し広げてしまっているのが原因のようです。

p.link {
word-wrap: break-word;
}

上記指定を加えてみてください。
PCと同じように画面幅いっぱいまで広がると思います。

Comments

[MikaelMinowa]

ありがとうございます！！
ほんと初歩的なミスですが、気づきませんでした。
おっしゃった通りに対処しましたら治りました。

Answer 2

headタグ内に、

<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=3, user-scalable=yes" />

あたり追加してみてはいかがでしょうか。

Comments

[MikaelMinowa]

やってみました！
ですが、多分Widthを100％にしている画像は綺麗に表示されますが、文字やほかの画像が大きくなってはみ出てしまいます。。

[aKusano]

横から失礼します。
PC向け固定レイアウトの指定しかしていないサイトに
viewportの指定を入れたら当然レイアウト崩れますので、
viewportでdevice-width指定を入れるなら、
基本的にレスポンシブのWebサイトに修正しないと無理です。
レスポンシブにするだけの知識がないならPC固定レイアウトのまま
崩れの原因を探って解決するしかないです。

[yu-ri]

あーなるほど…これは失礼しました。