Popup to display if viewed on mobile

问题

I have a website that needs to redirect mobile users to a mobile site, however because of the sites being hosted in different places, I can't set the cookie to remember if they've been directed from the mobile site. Therefore there is a continuous loop.

All I want to do now is display a popup if the user is viewing on a mobile, offering them the option to view the website on a mobile or cancel to view the full site.

I know this will be possible in Javascript/jQuery, but I'm not sure how to go about it.

Could anybody help me with this please?

Thanks

回答1:

You just just add the pop-up to your HTML, hide it on default and display it if it's a mobile device using 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; }
}

This is the best option by far, performance-wise. All modern phones support media-queries, so you won't have issues with that either.

Just add two links asking the user to go to the desktop site or mobile one. If he picks the desktop site, you can leave the popup out using a server-side language, or just remove the popup using javascript.

回答2:

Try this...

// 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");
}

回答3:

You can check the user agent. Here you can get detailed information.

回答4:

Here is some code I have used in the past to detect mobile devices:

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;

This should detect iPhones, iPods, Blackberries, Windows Phones, ZuneWP7s, most android phones, and many other phones. It will be false for most android tablets, Blackberry Playbooks, WebOS devices, iPads, and many other tablets.

来源：https://stackoverflow.com/questions/13178609/popup-to-display-if-viewed-on-mobile

标签

javascript

redirect

mobile