CSS識別高分辨率手機

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
/* 在這里可以放高清屏幕的CSS樣式 */
}

對于現代手機來說，高分辨率是非常常見的。例如，蘋果的Retina屏幕有著高達326 PPI的屏幕密度，這意味著它有非常高的像素密度，看起來非常清晰和銳利。雖然這看起來非常漂亮，但在設計和編寫CSS時，我們需要確保網站在高分辨率設備上看起來一樣出色。

一個可能會出現的問題是我們可能遇到一些圖片或其他元素在高分辨率屏幕上看起來模糊或失真。幸運的是，可以使用CSS媒體查詢來解決這個問題。

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-resolution: 192dpi) {
/* 在這里可以放高清屏幕的CSS樣式 */
}

這個媒體查詢會檢查屏幕的像素密度是否大于等于2或者分辨率是否至少為192dpi。如果屏幕滿足這些條件，那么這些CSS樣式將被應用。我們可以通過將圖片的尺寸加倍來提高圖片分辨率，或者使用高分辨率的字體和圖標，從而保證頁面在高分辨率屏幕上看起來一樣出色。

綜上所述，使用CSS媒體查詢可以輕松地識別高分辨率設備，并相應地調整樣式，使網站在這些設備上看起來更好。