通過使用jQuery執行失敗來過濾移動瀏覽器

只需爲移動web應用程序（使用xhtml-basic/xhtml-basic11 dtd）組合一些css，並試圖想出一種可靠的方式來過濾移動瀏覽器。我看過http://detectmobilebrowser.com，但似乎是根據字符串匹配列表進行過濾。通過使用jQuery執行失敗來過濾移動瀏覽器

這是我想做什麼：

1 - 在CSS中設置頁面的部分，從移動瀏覽器隱藏不顯示

#hideMeFromMobiles{display:none;}

2 - 使用調用腳本一個可靠的庫，幾乎肯定會在移動瀏覽器中失敗。該腳本是這樣的（僞）

if browser.window.width >= 480px then { 
    $(#hideMeFromMobiles).addStyle(display:block;) 
    }

的想法是對腳本失敗非破壞性的移動瀏覽器和桌面Web瀏覽器成功地運行。

我的問題是這樣的：

首先這項工作？有沒有理由這是一個死衚衕，我應該轉向另一種解決方案？

其次，有人可以確認正確的jQuery語法嗎？

感謝您的幫助，挖

2009-12-07 Dug

您應該能夠通過將僅由手持設備加載一個特殊的CSS鏈接到指定特定的樣式表只爲手機，普通的瀏覽器會忽略這一點：

<link href="/css/mobile.css" rel="stylesheet" type="text/css" media="handheld" />

在正常的CSS有

#hideMeFromMobiles{}

和移動CSS有

#hideMeFromMobiles{display:none;}

如果你鏈接正常的CSS後的移動CSS，移動CSS設置將覆蓋正常的。

2009-12-07 15:43:49

謝謝@Fungus，我被警告不要使用媒體屬性。顯然這不是可靠的，而且失敗也不一致。我試圖想到一個原始的，但可靠的解決方案... – Dug 2009-12-07 15:46:39

嗯..我從來沒有聽說過它比任何其他網絡技術更不可靠。但是你去了！將不得不看這個。 ;） – 2009-12-07 16:02:32

首先，移動瀏覽器可以講寬度和比例或滾動。

其次，jQuery對於很多移動設備來說是一個很胖的庫。它不會在所有這些應用程序上運行，並且會沖刷其中一些緩存。 xui可能是更好的選擇。 jQuery團隊正在研究爲移動設備製作更模塊化的庫。

第三，你需要圍繞「#hideMeFromMobiles」說明符引用一些引號。第四，一些手機瀏覽器默認JavaScript關閉（我正在看你的黑莓瀏覽器）。你需要一些<noscript>標記。

ppk一直在測試移動瀏覽器的陷阱。你應該從他的mobile tests開始。

最後，一些移動瀏覽器非常棒，尤其是使用WebKit的智能手機上的新手機。我會在iPhone，Android，Storm和Pre上測試該網站，然後再強制移動頁面。

2009-12-07 15:45:39 Nosredna

謝謝@Nosredna :-) – Dug 2009-12-07 15:57:16

嘗試http://www.iui-js.org/我認爲這對我來說更加清潔。

2011-06-20 02:40:15 pal4life

歡迎來到Stack Overflow！雖然提供選項可能會有所幫助，但您至少應該嘗試回答原始問題。有關信息，請參閱http://stackoverflow.com/questions/how-to-answer。 – GargantuChet 2011-06-20 17:27:58

如果您認真對待移動開發，您應該考慮爲移動設備構建單獨的頁面。

儘管#hideMeFromMobiles{display:none;}可以工作，但所有的內容和圖像仍然會被移動設備上的用戶下載，更不用說在頁面上運行的其他CSS和腳本。這將顯着增加訪問者的帶寬。更好地爲他們提供特定的移動網頁。

至於檢測，我認爲http://detectmobilebrowser.com是最好的方法之一。沒有必要重新發明輪子。正如其他答案中提到的，屏幕寬度可以欺騙你。

2011-06-20 03:14:45

回答