2011-01-28 65 views
5

這聽起來有點太好了,所以請告訴我,如果是這樣。通過屏幕分辨率檢測移動設備有多可靠?

如果我只有一個移動網站的單一版本( 不同設備的變體,所有移動設備只有一個網站), 通過屏幕分辨率檢測移動設備的可靠程度如何?

,只是充當了移動版本,如果屏幕分辨率<不如說是400像素。

注:我的問題是假設啓用javascript。此外,我知道有 用戶代理檢測,但我想沒有它。

+3

爲什麼你想不做用戶代理檢測?使用盡可能多的變量來確定這樣的事情是有意義的。另外,如果您嘗試定位某些設備,即「我想確保Windows Mobile Phones獲得特殊待遇」,那麼我認爲用戶代理檢測比屏幕分辨率更可靠。 另外,我想補充一點,用戶代理檢測將使測試更容易。 但是,使用屏幕分辨率非常好,因爲它是一種功能檢測,使用該信息顯示網站的「小屏幕」版本非常可靠。 – nedk 2011-01-28 14:08:46

回答

3

你會想通過媒體查詢服務不同的樣式表。您可以使用查詢來識別屏幕寬度,並只爲某些設備提供某些CSS。比如這個查詢將起到iphone.css只能識別爲具有iphone的典型尺寸的裝置:

<link media="only screen and (max-device-width: 480px)" href="iphone.css" type="text/css" rel="stylesheet" /> 

有關於這個問題了詳細的文章在alistapart

請記住儘管這不所有設備都能識別媒體查詢如果您需要支持大量的舊設備像黑莓和翻蓋手機,你應該採取勸以上對UA檢測 - 我知道這感覺錯了,如果你從桌面開發的世界來,但我們真的要使用我們的工具可用於我們和移動Web正在增長,但在許多方面仍然是一個新的視野。

0

可能不會傷害到這個功能添加到您的網站爲那些誰是確實在他們的移動設備上運行啓用JavaScript的Web瀏覽器。至於那些沒有的人,那麼你可以對他們做些什麼,除了讓他們在第一次加載時選擇屏幕尺寸之類的簡單事情?也許一個簡單的下拉列表可能的大小?

1

我來到這裏是因爲我有同樣的想法和問題,類似的情況 - 該網站已經需要JavaScript,我做了一個尺寸適合所有的移動網絡應用程序,至少目前是這樣。我們的發佈週期非常長 - 在代碼測試和發佈時,任何UA檢測硬編碼都會過時。由於這個替代接口的目的是使它在較小的屏幕上工作,所以使用該測試似乎是有意義的。 但是,我不知道,我會選擇多大的尺寸 - 我有一個預感移動設備沒有綁定(即使是慣例)到特定的屏幕尺寸。我想我們只需要決定主要網頁不再起作用。

我能理解別人的猶豫到這種做法,因爲有時也有與不僅僅是屏幕尺寸的移動設備上的標準場地等問題。不過,我認爲這種檢測有一個優勢。如果你唯一的問題是屏幕尺寸,我認爲這是一個好方法。

4

高度的Javascript移動設備屏幕檢測根本不可靠。問題在於不同的瀏覽器使用不同數量的「chrome」,而不同的操作系統版本對系統欄使用不同的高度。所有的檢測機制報告不可靠的高度(screen.height,window.outerHeight,window.innerHeight等等)

寬度似乎是所有操作系統上的window.outerWidth最可靠。

這裏閱讀最優秀的分析報告:

http://www.tripleodeon.com/2011/12/first-understand-your-screen/

0

這取決於你想要達到的目標。

如果你設計不同的屏幕分辨率,不管設備類型然後它是很好的使用分辨率範圍。

如果您爲特定設備類型(手機,平板電腦等)設計了並假定分辨率範圍始終匹配單個設備類型,那麼它最終會中斷。

你在你的例子使用的400px門檻,銀河S8 +報告412x846與此代碼:

console.log("width: " + screen.width + ", height: " + screen.height);

設備分辨率改變每一年,他們開始互相重疊。大型手機的分辨率高於小型平板電腦,大型平板電腦的分辨率高於某些臺式機。

如果您只是希望它能夠正常工作,或者您想要檢測特定的手機,您可能會得到它。

然而,僅使用屏幕分辨率來檢測設備類型並不可靠。