在手机上显示内容并隐藏在桌面上[重复]

Posted 2021-04-13

这个问题在这里已有答案：

• Display content only on mobile devices 4个答案

我有这个代码在网站上实现什么应用程序按钮，我如何才能在移动视图中显示它并将其隐藏在桌面视图上？

<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>

答案

你只能使用css与media-query

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

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