使用javascript/jquery檢測移動瀏覽器的最佳方法？

對於我正在處理的網站，我正在使用JavaScript實現圖像預加載，但如果某人的網絡帶寬較慢，我絕對不想撥打我的preload_images()函數。使用javascript/jquery檢測移動瀏覽器的最佳方法？

對於我的市場來說，只有那些使用移動互聯網的人才是智能手機。

檢測這些用戶的最佳方法是什麼，以便我可以避免爲他們預加載圖像？

選項1：檢測瀏覽器的寬度

if($(window).width() > 960){ preload... }

選項2：檢測用戶代理與瀏覽器的列表，以預加載爲

if($.browser in array safelist){ preload... }

在那裏有更好的選擇嗎？

來源

2010-07-15 Haroldo

我經常瀏覽我的手機上使用無線寬帶。僅僅因爲它是手機並不意味着它的帶寬很低，反過來說，仍有數量驚人的人仍在撥號上網。考慮嘗試讓整個網站更輕鬆/更快速爲每個人。 – edeverett 2010-07-15 14:27:51

@edeverett - 有關WiFi的好處，我很想擁有我的網站的移動優化版本，儘管寧可採取一種適合所有的方法。 – Haroldo 2010-07-15 14:29:16

也許使用CSS @media指令以及隱藏的對象？

.imagesToPreload {display:none;} 
@media screen { 
    #imageToPreload1 {background-image:url('blah.img');} 
} 
@media handheld { 
    #imageToPreload1 {background-image:none;} 
}

然後在Javascript中，您可以在「imagesToPreload」類獲取所有的對象，閱讀和backgroundImage屬性，如果它不是沒有預裝它。

無可否認，這是我的頭頂，我沒有測試這個想法。像往常一樣，一定有我沒有想到的東西...

來源

2010-07-15 14:48:10

我發現我不喜歡網站，決定哪個版本的網站，我應該訪問特定的設備或環境。根據你決定的標準做出初步決定是件好事，但爲了上帝的緣故，給我一個鏈接，我可以點擊，這樣我就可以選擇「更高帶寬網站」，反之亦然，並將其保存爲cookie。然後我可以用我自己的判斷來覆蓋自動腳本的任何錯誤。

來源

2010-07-15 14:57:31

我認爲edeverett關於手機的觀點不一定很慢（而且桌面也不一定很快），這是一個很好的觀點。

請記住不要刪除您的訪問者的選擇 - 即最正常的移動瀏覽器可以選擇不加載圖片（或特別不加載大圖片），也可以在下載之前壓縮圖片的代理服務 - 一些移動訪問者可能希望在您的網站上提供完整的預加載體驗。

另一種解決方案可能是這樣的： if($(window).width() < 320){ preload_smaller_images(); } 原因比以前更少的原因是移動瀏覽體驗比桌面更受限制。

R. Hill的CSS建議是不是最差的，雖然（它是否可以在CSS來實現，它應該IMO），它也可以做到每屏尺寸： @media handheld, screen and (max-width: 320px){ /* */ }

來源

2010-07-15 14:59:16 lucideer

使用javascript/jquery檢測移動瀏覽器的最佳方法？

回答

相關問題