Netlify 設備的行動視圖無法正常運作

Question

這個網站的 CSS 在我的電腦上運作得很好，就像在桌面版本和媒體查詢製作的行動版本中一樣，但是當我在行動裝置上查看它時，CSS 就停止工作了。網站連結：https://lightheart-basbousa-3c2db6.netlify.app/，repo連結https://github.com/hetyug04/portfolioV7。它託管在 netlify 上，但我以前沒有遇到過問題。這是我手機上的行動視圖

Answer 1

您的 CSS 正在較小的螢幕尺寸上運行。

使用瀏覽器的開發工具，我可以看到您在介紹類別上有一個帶有 display: none 的媒體查詢。這會影響小於或等於 1015 像素的螢幕。如果您變更或刪除媒體查詢，您的輸出將會變更。

不確定它為何存在，以及刪除是否能完全解決您的問題，但檢查這應該是您的第一步。

還有一些其他問題，例如溢出和寬度不正確，也許您想查看行動優先設計方法。

Answer 2

我解決了這個問題，顯然這是因為我將 CSS 樣式嵌套在樣式表中，一旦我取消巢狀樣式，CSS 就開始適用於行動瀏覽器