自分のPCのフルスクリーンの画面で表示したときに、意図したとおりのレスポンシブデザインにならず困っています。
検証ツールで幅を1300pxぐらいにしたところうまく2カラムのレイアウトが反映されたので、おそらくフルスクリーンの幅でWEBページを確認したときに自動で拡大されてしまっていることが原因だと思います。
ちなみに自分のPC幅は1920px * 1080pxです。なので全画面で見たときには2カラムのレイアウトで表示されると考えていました。
html
1 <meta charset="UTF-8"> 2 <meta name="viewport",initial-scale=1.0> 3 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 4 <title>アーバンペガサスFCオフィシャルサイト</title> 5 <link rel="stylesheet" href="css/detail.css"> 6 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> </head>
css
1 2@media screen and (min-width:767px) and ( max-width:1024px) { 3 タブレット幅では1カラムのレイアウト 4} 5 6@media screen and (min-width:1024px) { 7 PC幅で2カラムになるようにコーディングしています。 8}
今はhead部分しかありませんが、HTMLはコンテンツ部分を含めてどのような構造になっているのでしょうか。
CSSもなるべく今の状況が再現できるものをご提示ください。
コード全体を載せようとしたのですが、文字数オーバーでダメだったみたいです。
省略しようにも省略するポイントがわかりづらかったのでやめさせていただきました。すみません。
・クロムの検証ツールでwidthを広げて確認すると正しく表示される。
・実験をしたところ、ipad用のスタイルまでは適応されているが、pc用のスタイルは一切適応されていない(PC幅が適応される幅に達していない)→ブラウザで自動拡大されていると考えたのですが、原因はなんなのでしょうか。よろしくお願いします。
あなたの回答
tips
プレビュー