Question

我正在寻找一些代码放在我的网站上，该代码检测用户是否在移动设备上，打开弹出窗口并提供在主屏幕上添加链接到网站的图标。（就像将网站添加到收藏夹并在主屏幕上放置一个图标一样）。理想情况下，它应该适用于Android＆amp;苹果手机。任何帮助将非常感激。

Answer 1

您可以做的是在页面的某个位置创建一个div，其中包含您想要的确切文本。在你的CSS中，你然后使div显示：none并添加媒体查询，这样当设备是移动电话时，你再次显示div。

.mobile-div {
    display: none;
}

@media (max-width:767px) {
    .mobile-div {
        display: block;
    }
}

当然，您可以通过使用javascript函数检查屏幕宽度来扩展此功能，并在达到特定宽度时使用函数打开弹出窗口（因此被视为移动电话）。

<script type="text/javascript">
    (function () {
        var width = $(window).width();

        if (width < 400) {
            // do something
        }
    })();
</script>

然后，您可以在Google上搜索实际制作图标的方法，例如此脚本可能会对您有所帮助：https://github.com/h5bp/mobile-boilerplate/wiki/Mobile-Bookmark-Bubble。虽然我认为在iOS中不可能这样做，但您可能不得不考虑创建一个基本上启动您的网站的应用程序，或类似的东西。当然，这意味着您必须为在商店中显示的应用付费，因此它归结为您：您真的需要此功能吗？

检测移动设备的代码，并提供添加到主屏幕的链接

1 个答案: