Safari響應設計模式CSS媒體查詢「設備」未應用

我一直在使用Safari響應設計模式，同時開發和調試我正在開發的響應式網站。Safari響應設計模式CSS媒體查詢「設備」未應用

當設置爲任何移動裝置（例如任何iPhone或ipad），我期待一個媒體查詢這樣

@media screen and (max-device-width: 480px) { 
    .disappear-on-device { 
     display: none; 
    } 
}

火和風格元素與disappear-on-device類和與寬度< = 480設備因爲RDM可以專門設置爲模擬iPhone和iPad。

但是，樣式不會發生。 Chrome響應式設計模式似乎處理得很好。我一直無法在Safari首選項中找到任何相關內容。

我失去了一些東西在這裏？有沒有辦法讓Safari RDM像實際設備一樣行事？

來源

2016-07-06 Dave

device-width及其兄弟姐妹min-device-width和max-device width已被棄用並從標準中刪除。

您應該只使用width,min-width和max-width，它們根據視口的大小計算。在大多數移動設備上，width,min-width和max-width最終產生與device-width,min-device-width和max-device-width相同的淨結果。

以下是關於device-width棄用的信息。 https://developer.mozilla.org/en-US/docs/Web/CSS/@media/device-width

這是新規格，不再包含device-width。 https://www.w3.org/TR/mediaqueries-4/#width

來源

2016-09-09 00:00:06

感謝您的回答！你可以提供什麼資源？ – Dave

@sdotdi我更新了我的原始答案，並附上了棄用通知的鏈接。你還有其他你感興趣的資源嗎？ –

Safari響應設計模式CSS媒體查詢「設備」未應用

回答

相關問題