css媒體查詢：桌面和最新的智能手機的決議之間的衝突

-1

由於新手機有一個真正的大分辨率顯示器（例如：1280），我想知道什麼是最聰明的方式來做專用於1280手機的CSS媒體查詢。我的問題是，如果我這樣做：css媒體查詢：桌面和最新的智能手機的決議之間的衝突

@media only screen and (min-width:1136px) and (max-width:1280px)

我會包括一些桌面reslutions尺寸，我想有桌面視圖和移動視圖之間不同的UI。

有沒有什麼好的做法/解決方案的地方呢？

非常感謝！

來源

2013-04-04 user1713964

如果UI不同的是，因爲用戶的方式將與網站進行交互（觸摸vs鍵盤/鼠標），然後使用媒體查詢檢測分辨率是解決這個問題的錯誤方法。 – cimmanon 2013-04-04 13:28:31

UI差異比支持提供的功能更多地關於內容組織。有些內容在桌面上可能很重要，它們不在移動設備上。 – user1713964 2013-04-04 13:47:48

這仍然沒有改變這個事實，即分辨率與它是什麼類型的設備（手機，臺式機，微波等）無關。移動用戶在呈現比桌面版本更少的功能時往往會感到沮喪。 – cimmanon 2013-04-04 13:53:41

一個偉大的方式定位的裝置的像素比等智能電話設備是使用min-device-width和max-device-width，例如

@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { 
    /* Smartphone queries here */ 
} 

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { 
    /* iPad queries here */ 
}

或者，您可以使用Detect Mobile Browsers進行手機/平板電腦檢測。

來源

2013-04-04 12:36:08 lifetimes

真的，但正如我說@Fabrizio與最新的手機，他們的最大設備寬度開始播放桌面設備寬度 – user1713964 2013-04-04 13:25:16

@ user1713964看看這個，而不是，如果你打開一個jQuery的替代 - http：// www。 jquery4u.com/mobile/detect-mobile-devices-jquery/ – lifetimes 2013-04-04 13:32:31

對於移動設備只是試圖檢查min-device-width和/或max-device-width。

另一種可能性是檢查您定位

來源

2013-04-04 12:36:07 fcalderan

像素比例可以幫助一些例如指定視網膜顯示。但是要找到關於設備寬度的好方法會變得更加困難。例如，我們有新的Galaxy S4，其設備尺寸爲1080 x 1920.使用最大寬度和最大設備寬度管理組合並將手機與PC隔離變得困難。我還發現手持媒體類型，並且不幸地不被市場上大多數手機支持。 – user1713964 2013-04-04 13:22:27

用戶代理嗅探。

這不是好習慣，但是如果您嗅探useragents serverside併爲客戶端（手機，桌面）提供不同的內容（html/css/js），它就可以工作。

更好

你應該問自己哪些功能你的用戶界面是專爲，如觸摸，屏幕尺寸等檢測，你可以使用CSS媒體查詢和http://modernizr.com/

來源

2013-04-04 12:37:06 Johan

用戶代理商一直以來都是虛假陳述自己，永遠不可信*永遠*。 – cimmanon 2013-04-04 13:31:09

css媒體查詢：桌面和最新的智能手機的決議之間的衝突

回答

相關問題