質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

2回答

2274閲覧

CSSレスポンシブデザインで、スマホ表示で画面がはみ出してしまう

elekashiaiko

総合スコア10

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/10/15 09:25

前提・実現したいこと

CSSで、スマホとPCとで閲覧時の表示を変更したいです。

ここに質問の内容を詳しく書いてください。

現在、友人のwebサイト制作(レスポンシブデザイン)をしています、早坂と申します。

初心者なので、稚拙な質問でしたら申し訳ないのですが、どうにも解決できず困っているのでお助けいただければ幸いです。

ネットの情報を頼りに
@media screen and (max-width: 768px) {}
内にスマホ用のCSSを記述し、以下のページを作成しました。

gpcreation.xsrv.jp

PCで画面サイズを小さくしていくと、想定通りのレイアウトになってくれます。

しかし、スマホで確認するとなぜか画面の半分ほどしか表示されず、ピンチアウトで拡大しなくてはならない状況です。

どうしてこうなってしまうのかすらわからず、手を打てない状況です。ご回答いただければ幸いです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

スマホ用の@media only screen and (min-width: 768px) {よりも前の、全体に適応のCSSの方で
#headerbg #headerwidth: 960px;を指定していますが、それをコメントアウトして外してみてください。

これで多分、かなりマシな感じにはなりますが、まだ他にもありそうなのでチェックしてます。

投稿2018/10/15 10:00

colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

elekashiaiko

2018/10/15 10:51

私のような初心者の質問にご回答いただき本当にありがとうございます! さっそくコメントアウトしてみました。 おっしゃる通り、やってみたところかなり横幅のズレが改善されました。 ただ、まだスマホで閲覧時にはまだ画面の半分程度にズームした状態で表示されてしまいます。 widthを中心に、おかしいCSSがないか、探してみます。
colling

2018/10/15 11:17

はい。かなり見てますが、ちょっとわかんないですね。 @media only screen and (min-width: 768px) { より前で幅を指定したものは、 @media only screen and (min-width: 768px) { より後で、もう一度幅を指定しないと、上で書いたものを継承します。 marginやpaddingなんかも同じですので、よく見て確認してみてください。
elekashiaiko

2018/10/15 11:18

ありがとうございます! 指定漏れがないか、詳しくチェックしてみます。
guest

0

ios12 iphone xs max で閲覧したところ問題なく表示されているようですが、こちらは既に解決済みでしょうか???

投稿2018/10/16 08:43

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問