如果在移動設備上查看，則顯示彈出窗口

Question

我有一個網站需要將移動用戶重定向到移動網站，但是由於網站托管在不同的地方，我無法設置cookie以便記住它們是否來自移動網站。 因此有一個連續的循環。

我現在要做的就是在用戶正在手機上查看時顯示彈出窗口，為他們提供在手機上查看網站或取消查看完整網站的選項。

我知道這可能在Javascript / jQuery中，但我不知道如何去做。

請問有人幫我這個嗎？

謝謝

Answer 1

嘗試這個...

// Check for mobile user agent
var mobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
if (mobile) {
    //alert("MOBILE DEVICE DETECTED");              
} else {
    //alert("NO MOBILE DEVICE DETECTED");
}  

Answer 2

您只需將彈出窗口添加到HTML中，默認隱藏它，如果它是使用CSS的移動設備，則顯示它。

/* hidden on default */
div#popup { display: none; }

/* use a media query to filter small devices */
@media only screen and (max-device-width:480px) {
    /* show the popup */
    div#popup { display: block; }
}

到目前為止，這是性能方面的最佳選擇。 所有現代手機都支持媒體查詢，因此您也不會遇到任何問題。

只需添加兩個鏈接，要求用戶轉到桌面站點或移動站點。 如果他選擇桌面站點，您可以使用服務器端語言保留彈出窗口，或者只使用javascript刪除彈出窗口。

Answer 3

您可以檢查用戶代理。 在這里您可以獲得詳細信息。

Answer 4

以下是我過去用於檢測移動設備的一些代碼：

var ua=navigator.userAgent.toLowerCase();
var isMobile = 
   screen.width < 500 ||
   ua.indexOf('mobile')!=-1 ||
   ua.indexOf('iphone')!=-1 ||
   ua.indexOf('ipod')!=-1 ||
   ua.indexOf('blackberry')!=-1 ||
   ua.indexOf('windows phone')!=-1 ||
   ua.indexOf('zunewp7')!=-1) && 
   ua.indexOf('tablet')==-1 &&
   ua.indexOf('playbook')==-1 &&
   ua.indexOf('webos')==-1 &&
   ua.indexOf('ipad')==-1;

這應該可以檢測到iPhone，iPod，黑莓，Windows手機，ZuneWP7，大多數Android手機以及許多其他手機。 對於大多數Android平板電腦，Blackberry Playbooks，WebOS設備，iPad和許多其他平板電腦來說，這將是假的。