防止移动 Safari 中网站横向滚动

发布于 2024-12-15 03:34:53 字数 375 浏览 2 评论 0原文

我有一个基于 jQuery Mobile 的网站。 我正在使用视口标签来使我的网站适合屏幕尺寸。

到目前为止,一切都很好。

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

但现在的问题是,我仍然可以在屏幕上滚动我的整个网站(整个移动 safari 浏览器)。

我尝试

body {
   overflow:hidden;
}

按照此处其他帖子中的描述进行设置。但这对我不起作用。有人知道如何解决这个问题吗?

I have a website based on jQuery Mobile.
I'm using the viewport tag to fit my site to screen size.

So far so good.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

But the Problem is now, that I'm still able to scroll my whole site (the whole mobile safari browser) around the screen.

I tried to set

body {
   overflow:hidden;
}

like described in other posts here. But it does not work for me. Anyone an idea how to fix that?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(4

不可一世的女人 2024-12-22 03:34:53

我遇到了同样的问题,最终使用了以下解决方法:

document.ontouchmove = function(event) {
    event.preventDefault();
};

I had the same problem, and ended up using this workaround:

document.ontouchmove = function(event) {
    event.preventDefault();
};
老街孤人 2024-12-22 03:34:53

缩放和滚动并不总是相关的。这里的问题不在于视口,而在于网站的实际宽度,如果尺寸比屏幕尺寸宽,则会出现滚动问题。您必须给我们一个实例,以便我们可以帮助您找到溢出布局的元素

Well zooming and scrolling doesn't always have to be related. Your problem here is not with the viewport but with the actual width of your site, if the size is wider than the screen size you will have scrolling issues. You would have to give us a live example so we can help you to find the elements that are overflowing your layout

徒留西风 2024-12-22 03:34:53

我将你们的网站与我们自己的网站进行了比较。您使用的是 jQuery Mobile 1.0RC1,我们使用的是 1.0b3。您的网站会出现此问题,但我们的网站不会出现此问题。

也许尝试升级到最新的 jQuery Mobile?

I compared your site with one of our own. You're using jQuery Mobile 1.0RC1 and we're using 1.0b3. The problem occurs with your site but not with ours.

Maybe try upgrading to the latest jQuery Mobile?

半步萧音过轻尘 2024-12-22 03:34:53

正如 Jasper 指出的那样,在尝试获取这些内容时遇到 404:

)看起来您的文件夹名称“jquerymobile-FDL 2”中有一个空格,我会重命名它而不包含空格。

另外,我不确定您是否可以在标题或样式标签内添加元标记,也许将所有元标记移动到头标记的开头?

你似乎也导入两个不同版本的 jQuery

As Jasper pointed out, you have a 404 while trying to fetch these:

You look like you have a space in a folder name "jquerymobile-FDL 2", I would rename this without the space.

Also I'm not sure if you can have a meta tag inside the title or style tags, maybe move all meta tags to the start pf your head tag?

Also you seem to be importing two different versions of jQuery

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文