CSS不適用於小屏幕尺寸手機

根據屏幕尺寸顯示不同的標誌，不知道爲什麼尺寸爲320的手機（索尼愛立信WT19i）無法執行正確的樣式表。CSS不適用於小屏幕尺寸手機

我使用JavaScript window.innerWidth和window.innerHeight這是320x401檢查屏幕寬度。它加載800px的CSS。

@media screen { 
body { 
     background-image:url('desktop.png') !important; 
     background-repeat:no-repeat !important; 
     background-attachment:fixed !important; 
     background-position:right bottom !important; 
    } 
} 

@media screen and (max-device-width: 320px) { 
    body { 
     background-image:url('320P.png') !important; 
     background-repeat:no-repeat !important; 
     background-attachment:fixed !important; 
     background-position:right bottom !important; 
    } 
} 

@media screen and (max-device-width: 800px) { 
    body { 
     background-image:url('800P.png') !important; 
     background-repeat:no-repeat !important; 
     background-attachment:fixed !important; 
     background-position:right bottom !important; 
    } 
}

來源

2014-01-10 Kelvin

嘗試向您的「」添加「'。 – Passerby

在此處添加javascript並更好地使用'max-width'，因爲在'max-device-width'中，您必須添加'device-pixel-ratio' – Pinal

爲什麼會這樣？

因爲CSS默認情況下，發生在其任何標籤的樣式應用的最後規則....所以：

@media screen and (max-device-width: 320px)和

@media screen and (max-device-width: 800px)
它們都適用於width of 320px ...但由於稍後提及max-device-width: 800px，瀏覽器會忽略max-device-width: 320px規則，因爲它可以被上一條規則覆蓋，因此會應用最後一條規則。

解決方案

要麼調換順序，或使用min-device-width: 321px代替max-device-width: 800px！

演示：我已經使用min-width展示演示，使用min-device-width爲你的CSS

demo of what you are doing

solution 1（交換查詢）

solution 2（使用分鐘代替max to避免覆蓋）

來源

2014-01-10 09:24:19 NoobEditor

更改此設置： -

@media only screen 
and (min-device-width : 321px) 
and (max-device-width : 800px){ 
    body { 
     background-image:url('800P.png') !important; 
     background-repeat:no-repeat !important; 
     background-attachment:fixed !important; 
     background-position:right bottom !important; 
    } 
}

來源

2014-01-10 09:09:51 Anup

反轉順序的最後2個媒體

來源

2014-01-10 09:09:57 n1kkou

重新排列媒體查詢的順序。您希望更小的屏幕，在此改變較大，使他們必須定義後：

@media screen { 
body { 
     background-image:url('desktop.png') !important; 
     background-repeat:no-repeat !important; 
     background-attachment:fixed !important; 
     background-position:right bottom !important; 
    } 
} 

@media screen and (max-device-width: 800px) { 
    body { 
     background-image:url('800P.png') !important; 
     background-repeat:no-repeat !important; 
     background-attachment:fixed !important; 
     background-position:right bottom !important; 
    } 
} 

@media screen and (max-device-width: 320px) { 
    body { 
     background-image:url('320P.png') !important; 
     background-repeat:no-repeat !important; 
     background-attachment:fixed !important; 
     background-position:right bottom !important; 
    } 
}

此外，刪除所有!important的。絕對沒有理由讓他們在那裏

來源

2014-01-10 09:23:15 Turnip

CSS不適用於小屏幕尺寸手機

回答

相關問題