javascript 如果在移动设备上查看则弹出显示
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13178609/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Popup to display if viewed on mobile
提问by user1607021
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.
我有一个需要将移动用户重定向到移动站点的网站，但是由于站点托管在不同的地方，我无法设置 cookie 以记住它们是否是从移动站点定向的。因此有一个连续的循环。
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.
我知道这在 Javascript/jQuery 中是可能的，但我不确定如何去做。
Could anybody help me with this please?
有人可以帮我吗？
Thanks
谢谢
回答by Alex Gill
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");
}
回答by Tim S.
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.
您只需将弹出窗口添加到 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; }
}
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.
只需添加两个链接，要求用户转到桌面站点或移动站点。如果他选择桌面站点，您可以使用服务器端语言不显示弹出窗口，或者仅使用 javascript 删除弹出窗口。
回答by qwedsa
回答by Joshua Dwire
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.
这应该可以检测到 iPhone、iPod、黑莓、Windows Phone、ZuneWP7s、大多数安卓手机和许多其他手机。对于大多数 android 平板电脑、Blackberry Playbooks、WebOS 设备、iPad 和许多其他平板电脑，这将是错误的。
