jquery - 将容器设置为全宽并且无法在移动设备上水平滚动

Question

这是测试链接:

http://kotechweb.com/ig112/

现在在移动设备上， 水平滚动到中间，

我想实现的是这样

容器在移动设备上是全宽的并且不能水平滚动

代码如下:

<meta name="viewport" content="width=device-width, initial-scale=0.5">

然后滚动到中间

scrollTo(($(document).width() - $(window).width()) / 2, 0);

背景设置为 1903px，因为不希望在调整窗口大小时中心内容向左移动

非常感谢您的帮助。

Answer 1

您正在对您的布局做一些事情，这将导致它不能很好地响应并且视口(viewport)测量可能会关闭(我没有合适的设备来测试这个但修复这些东西应该可以解决您的问题):

1. 将初始比例设置为 1。为什么将其设置为 .5？我想弥补你的布局问题？内容容器的静态宽度不允许它响应，这可能是您所反对的。

2. 设置 .my_box { 最大宽度:1903px； }

3. .my_box 容器内联样式设置为不重复、滚动和中心居中，然后使用 background-size: cover 使其始终适合:

背景:透明url("./assets/image/bg5.jpg") 无重复滚动中心中心/封面； 背景尺寸:封面；

1. 然后测试您的 js，您会发现滚动到正确的位置，即页面下方 1/2 的位置，但您不希望这样，您希望它滚动到一个 anchor 。将 anchor (哈希/ID)放在您希望滚动的位置，然后将您的 jQuery 设置为在页面加载后缩放到那里。

让我知道这是怎么回事。