如何仅在移动设备显示Meta标签？附代码实现需求

嘿，我来帮你搞定这个移动端专属meta标签的需求！结合你给出的代码片段，我整理了完整的实现方案，还优化了一些细节，确保只有移动/平板设备会加载指定的viewport meta，桌面端则保持默认（相当于隐藏移动端的meta配置）。

完整代码实现 #

function initScreen() {
    // 优化设备检测逻辑，覆盖更多主流移动/平板设备
    const userAgent = navigator.userAgent.toLowerCase();
    const isMobile = /iphone|ipod|android|blackberry|webos|opera mini|iemobile|mobile/.test(userAgent);
    const isTablet = /ipad|tablet|kindle|playbook/.test(userAgent);
    
    // 仅在移动或平板设备上添加指定的viewport meta
    if (isMobile || isTablet) {
        // 先检查是否已经存在，避免重复添加导致的冲突
        if (!$('meta[name="viewport"]').length) {
            $('head').append('<meta name="viewport" content="initial-scale=0.30, maximum-scale=0.50, minimum-scale=0.25, width=device-width, user-scalable=yes">');
        }
    }
    // 桌面端啥也不用做，浏览器会用默认的viewport设置
}

// 页面加载完成后执行检测
$(document).ready(function() {
    initScreen();
});

// 可选：如果要支持浏览器窗口 resize 时的适配（比如用户拉小窗口模拟移动端）
$(window).resize(function() {
    initScreen();
});

关键细节说明 #

• 更靠谱的设备检测：扩展了用户Agent的检测范围，覆盖了更多小众移动设备，减少漏判情况。
• 防重复添加：每次添加前先检查页面里有没有已存在的viewport标签，避免多次执行函数时插一堆重复标签。
• 桌面端逻辑：桌面端不执行任何添加操作，浏览器会使用默认的viewport行为，完美实现“隐藏”移动端meta的需求。
• 窗口resize适配：可选的resize监听，能让页面在用户调整浏览器窗口尺寸时自动重新适配，比如从桌面窗口缩小到移动端尺寸时，自动加载对应的meta标签。

额外小技巧 #

如果你的页面之前已经有默认的viewport标签，想要在桌面端完全移除它，可以在else分支里加这段代码：

else {
    $('meta[name="viewport"]').remove();
}

这样桌面端就彻底没有viewport meta标签，完全遵循浏览器的默认渲染规则。

内容的提问来源于stack exchange，提问作者Duc Phuli