如何锁定任何浏览器的屏幕宽度？

Question

只需访问此测试网站：ltdcoapp.uphero.com，从您的智能手机，然后滑动屏幕，看看右边是什么，问题是：是的，屏幕滑动，并显示我想隐藏的内容在右边。

我到目前为止的尝试是使用body{overflow-x: hidden;}，但仅适用于桌面浏览器。

你可以告诉我该如何防止这种情况吗？

PS：我真的不想让网站获得流量，但这是向您展示问题的唯一方法

Answer 1

您是否使用overflow：hidden属性设置了相应的宽度？

编辑：宽度的相对值（如100％）将无效（因为它们也包含屏幕的右侧部分）。将其修复为绝对像素值（在此示例中：1024px）：

body {
    overflow-x: hidden
    width: 1024px
}

在标题中添加相应的视口元标记也可能有帮助：

<meta name="viewport" content="user-scalable=no, width=1024px, initial-scale=1.0" />

另外，完全禁用滚动是一种解决方案吗？ Disable scrolling in all mobile devices

Answer 2

这个会阻止任何触摸响应，这在我的情况下是没用的。

document.body.addEventListener('touchstart', function(e){ e.preventDefault(); });

这个非常有用，但问题是它可以防止水平和垂直滚动。

document.body.addEventListener('touchmove', function(e){ e.preventDefault(); });

这仅适用于桌面浏览器。

body{overflow-x: hidden;}

尝试了几次这样做是为了防止用户缩放页面，这在某些方面很有用，但不能解决向右滚动的问题。

<meta name="viewport" content="width=device-width; initial-scale = 1.0;user-scalable=no" />

Thx dominikus，你肯定有帮助。