javascript - 在移动设备上显示内容并在桌面设备上隐藏

Question

我有此代码用于在网站上实现 whats 应用程序按钮，我如何仅在移动视图中显示它并在桌面视图中隐藏它？

<script type="text/javascript">
    (function () {
        var options = {
            whatsapp: "+39 ", // WhatsApp number
            call_to_action: "contacts", // Call to action
            position: "right", // Position may be 'right' or 'left'
        };
        var proto = document.location.protocol, host = "whatshelp.io", url = proto + "//static." + host;
        var s = document.createElement('script'); s.type = 'text/javascript'; s.async = true; s.src = url + '/widget-send-button/js/init.js';
        s.onload = function () { WhWidgetSendButton.init(host, proto, options); };
        var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(s, x);
    })();
</script>

标签： javascripthtmlcss

Answer 1

您只能将 css 与media-query

例如，当浏览器窗口宽度为 600px 或更小时隐藏按钮：

@media only screen and (max-width: 600px) {
    button{
        display: none;
    }
}