元标记如何仅在移动设备上显示?

时间:2018-04-16 09:31:06

标签: javascript html wordpress woocommerce tags

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

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>

有人可以帮助我吗?

1 个答案:

答案 0 :(得分:0)

也许你需要使用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>