如何在网站被移动端等小视口打开时向用户弹出警告？

需求 #

网站仅适配桌面设备（笔记本电脑、显示器、电视），移动设备上响应性不佳，需要在用户用移动设备或小视窗打开网站时弹出警告提示。

可行实现方式 #

你找到的通过监听窗口尺寸变化来判断的思路是有效的，以下是优化后的中文版本代码：

// 标记警告是否已弹出，避免重复提示
let hasShownWarning = false;

// 监听窗口尺寸变化
window.addEventListener("resize", checkViewport);

// 页面加载完成后立即检查视口
window.addEventListener("load", checkViewport);

function checkViewport() {
    const viewportWidth = window.innerWidth;
    const viewportHeight = window.innerHeight;
    const isMobileViewport = viewportWidth < 900 || viewportHeight < 600;

    if (isMobileViewport && !hasShownWarning) {
        alert("本网站暂不支持当前视口尺寸，请使用桌面设备访问以获得最佳体验。");
        hasShownWarning = true;
    } else if (!isMobileViewport && hasShownWarning) {
        // 视口恢复到桌面尺寸时重置标记，方便后续再次触发
        hasShownWarning = false;
    }
    console.log(`当前视口：宽${viewportWidth}，高${viewportHeight}`);
}

优化点说明 #

• 提取checkViewport函数，让代码更易维护
• 添加hasShownWarning变量，避免窗口频繁 resize 时重复弹出警告
• 增加页面加载时的检查，确保用户刚进入网站就会收到提示
• 视口阈值（900px宽/600px高）可根据网站实际适配需求调整

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