部分基於設備而不是屏幕分辨率的部分基於響應的網站

Question

我已經通過@media查詢設置了斷點的響應式網站。我有幾個基本的斷點

1. 最小寬度的：1600像素 - 用於電視和大分辨率的屏幕（這只是中心的整個頁面，並在兩側的白色邊緣，沒有什麼太顯著）

2. 最大寬度：1024px - 對於平板電腦，有很多變化，特別是因爲平板電腦具有corse觸摸屏，而這些桌面通常沒有。完全不同。

3. max-width：600px - 對於智能手機，還有許多變化，特別是將兩個或四個colums的內容縮小爲一個。

現在我發現，可能是一個問題，因爲有nowdays片作用在與瀏覽器，因爲他們有例如1280px分辨率的寬度，但也有仍然顯示器1280px的寬度電腦也一樣，甚至較小，所以我不能爲此更改斷點值。

我當然不希望平板電腦和平板電腦版本的計算機上的桌面版本，因爲他們創造的不是分辨率，而是更多的平臺。

我知道有些東西叫做用戶代理，比如WURFL，這似乎是完美的。但有什麼辦法如何將WURFL（平板電腦，桌面，智能手機...）的這個值與css @media查詢連接起來。

例如，在WURFL中檢測到設備是平板電腦，並更改CSS文件中的斷點值，以顯示平板電腦版本，而不是桌面版本？或者有沒有其他方法與這個理論解決方案有類似的結果？

Answer 1

無需識別設備，只需使用正確的媒體查詢即可。

@media only screen and (min-width : 320px) { 

    } 

    /* Extra Small Devices, Phones */ 
    @media only screen and (min-width : 480px) { 

    } 

    /* Small Devices, Tablets */ 
    @media only screen and (min-width : 768px) { 

    } 

    /* Medium Devices, Desktops */ 
    @media only screen and (min-width : 992px) { 

    } 

    /* Large Devices, Wide Screens */ 
    @media only screen and (min-width : 1200px) { 

    } 

Answer 2

我認爲你正在尋找這個

jQuery代碼來檢測移動設備

http://www.webtrainingcentre.com/jquery/scripts/jquery-code-to-detect-mobile-devices/