Netlify デバイスのモバイルビューが正しく動作しない

Question

この Web サイトの CSS は、メディア クエリを使用して作成されたデスクトップ バージョンやモバイル バージョンと同様に、私のコンピュータでは正常に機能しますが、モバイル デバイスで表示すると CSS が機能しなくなります。ウェブサイトのリンク: https://lightheart-basbousa-3c2db6.netlify.app/、リポジトリのリンク https://github.com/hetyug04/portfolioV7。 netlify でホストされていますが、これまで問題があったことはありません。これは私の携帯電話にあります

P粉476547076 · Answer

CSS は小さい画面サイズで実行されています。

ブラウザの開発ツールを使用すると、intro クラスに display: none を含むメディアクエリがあることがわかります。これは、1015 ピクセル以下の画面に影響します。メディアクエリを変更または削除すると、出力が変更されます。

なぜそれが存在するのか、そしてそれを削除することで問題が完全に解決されるかどうかはわかりませんが、これを確認することが最初のステップとなるはずです。

オーバーフローや不正な幅など、他にもいくつかの問題があります。モバイルファーストの設計アプローチをチェックしてみてください。

P粉757640504 · Answer

問題は解決しました。どうやら、スタイルシート内で CSS スタイルをネストしており、スタイルのネストを解除すると、CSS がモバイルブラウザで動作し始めたことが原因のようです。