携帯、タブレットで閲覧した時にダブルタップしないとレスポンシブデザインにならないのはなぜでしょう?
ページを開くと、まずはPC版で表示されダブルタップでレスポンシブに変わる感じです。
PCでは、F12で携帯サイズを確認しますが、その時はダブルクリックしないとレスポンシブで閲覧できません。レスポンシブの閲覧は問題ないのですが、
サイトを開いた時と次ページへ飛ぶ際にPC版の表示となります。
CSSはレスポンシブ用で別でファイルを作成しHTMLとリンクさせています。```
HTML
1<meta name="viewport" content="width=device-width,initial-scale=1"> 2<link rel="stylesheet" href="../css/responsive.css">
CSS
1@media screen and (max-width:600px){ 2}
書かれている状況が再現するコード(HTML/CSS/JavaScriptなど)か、再現するURLを提示されたほうが回答を得やすいと思います。
これが該当のURLです。。。 https://arvo-corp.com
(質問文は編集できます)この「質問への追記・修正の依頼」の部分はデフォルトで表示されませんので、質問本文に追記することをお勧めします。(回答欄にご自身で書かれたコードも含めて)
https://arvo-corp.com/ を拝見しましたが、ダブルクリックしてもモバイルサイズになりませんでした。CSSのコメントにtypoがあるようです。
ああ、モバイル実機で見て分かりました。ダブルタップで全画面表示になっているだけで、widthは1240pxぐらいありますよこれ。スライダーを見直すことをお勧めします。
コンテンツ部分はCSSのレスポンシブが反映されているので、スライダーのサイズだけを見直した方が良いとゆう事でしょうか?
CSS見てみましたが、@importが悪さをしているような気がします。削除されては?
あと、スクリーンサイズによらず、.footer-column が width:1240px になってますね。
フッターも気になってた箇所ではありました。。。ずいぶん前にバックアップ用として保存しておいた現況より前のIndex.htmlで確認したらダブルクリックせずに携帯画面を確認する事できました。うーんもう少し探ってみます。
回答4件
あなたの回答
tips
プレビュー