15

我花了最后一个小时阅读了关于缩放和.scrollTop()处理变化的众多问题，并尝试了至少 20 种不同的东西——所有东西看起来甚至对我的情况都是远程可行的，但我仍然只有部分解决方案。

我有一个包含三个字段和一个继续按钮的表单。继续按钮打开表单的其余部分。当您选择文本字段时，Safari 移动版会放大。我特别不介意。如果我阻止缩放，那么它可能太小而无法读取字段，如果我以可读的缩放级别加载，那么您只能看到页面的一部分，因此放大行为是可以的。

情况是，在单击按钮并显示另一半表单后，窗口仍在放大，您正在查看页面的随机补丁。

根据我的设想，可能有两种处理方式：
1）单击按钮后实际缩小
2）滚动到表单下一部分显示的位置

我尝试了所有我能找到的缩小和处理标签viewport content width的meta方法，但它并没有为我处理它，因为它只是使视口变大或变小，实际上根本没有缩小。这可能适用于其他人，但不适用于我，因为我已经有了很多样式，这可能使这不是一个选择。

我已经解决了滚动解决方案并且.scrollLeft()工作正常，但.scrollTop()无论我给它什么选择器都不会工作。我试过了：

$('body').scrollTop
$('html').scrollTop
$('document').scrollTop
$('body,html,document').scrollTop
$('html:not(:animated),body:not(:animated)').scrollTop
$('html:not(:animated),body:not(:animated),document:not(:animated)').scrollTop
$('#content').scrollTop // that's a wrapper div
$(window).scrollTop

有人知道如何.scrollTop()在 Safari Mobile 中工作吗？

4

3 回答 3

1

我认为您试图以错误的方式解决问题。只需确保您的表单字段font-size: 16px位于移动视口上，这样 Safari 就不会放大。

如果您position: fixed的容器上有 scrollTop ，也可能无法正常工作。

于 2016-07-21T17:35:29.843 回答
0

您是否尝试使用锚点？

它们应该在任何地方都可以工作，因为它们是浏览器的本机功能。

带有此代码的原始帖子在这里

$(function() {
  $('a[href*="#"]:not([href="#"])').on('click', function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});
于 2016-04-27T17:37:06.857 回答
-2

无需使用 jquery 来执行此操作：

window.scrollTo(0, 0);

您还可以使用元标记防止一起缩放：

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

您可能只想在遇到问题的页面上执行此操作？

于 2013-03-19T11:36:05.107 回答