移動CSS僅在設備旋轉後才加載

我的網站redkrypt.com在我的筆記本電腦上工作完美，但是在旋轉一次後，css將只加載我的iPhone 4S。在我這樣做後，它可以垂直和水平方向工作。我試過，我知道包括添加移動CSS僅在設備旋轉後才加載

<meta name="viewport" content="width=device-width,initial-scale=1">

，並在我的媒體查詢與和設備之間的區別的一切，但似乎沒有任何工作。有什麼建議麼？

來源

2015-06-06 Arthur Campello

認爲這是因爲您在鏈接標記中使用媒體查詢而不是在CSS本身。然後，瀏覽器根據查詢和當前屏幕大小加載文件，而不是一次全部加載（在您的情況下，這也不是很有效！）。因此，對於每個定義的大小，您現在都有一個單獨的css文件，它也使用冗餘樣式。認爲你最好使用一個CSS文件，並在裏面設置媒體查詢。這種方式維護應該更容易，你也可以避免你提到的問題。另外，爲什麼你使用這麼多的屏幕尺寸？通常你不需要添加3-4個以上的尺寸，但你已經有10個文件。另外考慮在你的佈局中使用百分比而不是固定的像素值，你的CSS沒有真正的響應，即使在許多尺寸下仍然失敗。您可以通過縮小窗口來在桌面瀏覽器中測試自適應設計。確保內容不會以任何尺寸被切斷。

來源

2015-06-06 19:53:16

感謝您的幫助。我是網頁設計新手（更多的是編碼），所以我仍然有很多東西需要學習。我會嘗試在我的CSS中使用更多百分比並整合這些文件。我知道，哪些設備不適用於該網站？ –

好吧，只要打開您的網站，然後慢慢縮小您的瀏覽器窗口，您應該看看自己。具體來說，您的社交按鈕存在問題，並且您的菜單在第一次媒體查詢啓動之前被切斷。您不應該爲特定設備編碼，因爲它們有這麼多。它更好地確保您的佈局在*每個*屏幕尺寸都可以正確呈現，從1280像素下降到320像素。 –

移動CSS僅在設備旋轉後才加載

回答

相關問題