元标记如何仅在移动设备上显示？答案

【问题标题】：How do meta tags only show on mobile devices?元标记如何仅在移动设备上显示？
【发布时间】：2018-04-16 09:31:05
【问题描述】：

我需要一个代码 sn-p 来帮助我的元标记仅在移动设备上显示，并且默认桌面将被隐藏。

function initScreen() {
    isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
    isTablet = (/iPad/).test(navigator.userAgent);
    if(isMobile) {
        $('<meta name="viewport" content="initial-scale=0.30, maximum-scale=0.50, minimum-scale=0.25, width=device-width, user-scalable=yes">').appendTo('head');
    } else if(isTablet) {
        $('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">').appendTo('head');
    } else {
        $('<meta name="viewport" content="initial-scale=0.80, maximum-scale=0.80, width=device-width, user-scalable=no">').appendTo('head');
    }
}


<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript"> 
    $(document).ready(function() {
        initScreen();
    });
</script>
</head>

有人可以帮我吗？

【问题讨论】：

您不需要在桌面上隐藏视口元标记。此外，文档就绪事件将触发太晚，无法使用此方法。
??元标记不会显示在任何设备中...
@evolutionxbox 你说得对，不是很有必要
@Teemu 我打算只在我的电脑上没有显示的移动版本中显示这个标签

标签： javascript html wordpress woocommerce tags

【解决方案1】：

也许你需要使用document.write 而不是使用jquery append

<head>
<script>
    var isMobile = (/iPhone|iPod|Android|BlackBerry/).test(navigator.userAgent);
    isTablet = (/iPad/).test(navigator.userAgent);
    if(isMobile) {
        document.write('<meta name="viewport" content="initial-scale=0.30, maximum-scale=0.50, minimum-scale=0.25, width=device-width, user-scalable=yes">');
    } else if(isTablet) {
        document.write('<meta name="viewport" content="initial-scale=0.95, maximum-scale=0.95, width=device-width, user-scalable=no">');
    } else {
        document.write('<meta name="viewport" content="initial-scale=0.80, maximum-scale=0.80, width=device-width, user-scalable=no">');
    }
</script>
</head>

【讨论】：

感谢@Tan Duong