在移动设备上查看时显示的弹出窗口 [英] Popup to display if viewed on mobile

问题描述

我有一个网站，需要将移动用户重定向到移动网站，但是由于这些网站托管在不同的位置，因此我无法设置cookie来记住它们是否来自移动网站.因此，存在一个连续的循环.

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.

我知道这在Javascript/jQuery中是可能的，但是我不确定该怎么做.

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

有人可以帮我吗?

谢谢

推荐答案

您只需将弹出窗口添加到HTML中，默认情况下将其隐藏，如果它是使用CSS的移动设备，则将其显示.

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.

只需添加两个链接，要求用户访问桌面网站或移动网站.如果他选择了桌面站点，则可以使用服务器端语言来保留弹出窗口，也可以仅使用javascript删除弹出窗口.

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.

这篇关于在移动设备上查看时显示的弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！