【问题标题】:Prevent iPhone from zooming in on `select` in web-app防止 iPhone 放大网络应用程序中的“选择”
【发布时间】:2011-09-22 22:17:55
【问题描述】:

我有这个代码:

<select>
    <option value="c">Klassen</option>
    <option value="t">Docenten</option>
    <option value="r">Lokalen</option>
    <option value="s">Leerlingen</option>
</select>

在 iPhone 上的全屏网络应用中运行。

当从这个列表中选择某些东西时,iPhone 会放大select 元素。并且在选择某些内容后不会缩小。

如何防止这种情况发生?还是缩小?

【问题讨论】:

    标签: javascript css html iphone-web-app


    【解决方案1】:

    可能是因为字体大小小于阈值,浏览器试图缩放区域,这通常发生在iphone中。

    提供元标记属性“user-scalable=no”将限制用户在其他地方缩放。由于问题仅出在 select 元素上,请尝试在您的 css 中使用以下内容,此 hack 最初用于 jquery mobile。

    HTML:

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

    CSS:

    select{
    font-size: 50px;
    }
    

    源代码:unzoom after selecting in iphone

    【讨论】:

    • 如果文本是可见的(在我的例子中),在它启用缩放之前似乎 16px 是最小值。
    • 为了更清楚,这条线会阻止自动缩放:$('&lt;meta&gt;', {name: 'viewport',content: 'user-scalable=no'}).appendTo('head');
    • 从什么时候开始将文本隐藏在选择元素中?? “不会带来任何布局问题”
    • @Billy 我的意思是说,当字体大小的值为 50px 时,它在其他 html 元素上看起来很奇怪,而不是下拉菜单,我称之为布局问题。
    • 但是如果您需要允许用户可扩展以解决可访问性问题或任何其他原因,请参阅下面的答案stackoverflow.com/questions/6483425/…
    【解决方案2】:

    user-scalable=no 是您所需要的,因此这个问题实际上有一个明确的答案

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

    【讨论】:

    • 其实加上width=device-width,initial-scale=1.0,maximum-scale=1.0应该就够了。我不认为您需要最大规模的用户可扩展。
    • @DanSmart,至少在我的情况下(我不知道是什么让它与众不同),最小/最大比例还不够 - 添加 user-scalable=no 确实有所作为。跨度>
    • 这感觉像是一种非常严厉的方法——我建议谨慎使用 user-scalable=no。 From Dev.Opera,“也可以完全关闭缩放,但请记住,缩放是很多人使用的重要辅助功能。因此,只有在真正必要时才应该关闭它,例如在某些情况下游戏和应用程序的类型。”
    • 从 iOS 10 开始忽略用户可缩放。
    • 当您的字体大于 16px 时,浏览器在聚焦输入时可能会缩小。对我来说,我只需要添加minimum-scale=1,这也保留了用户缩放的可能性。
    【解决方案3】:

    这似乎适用于我解决此问题的情况:

    @media screen and (-webkit-min-device-pixel-ratio: 0) {
    select:focus, textarea:focus, input:focus {
            font-size: 16px;
        }
    }
    

    Christina Arasmo Beymer推荐的here

    【讨论】:

    • 在我的情况下 IOS 7x 旧的用户可扩展是不够的。上面的诀窍谢谢你的分享。
    【解决方案4】:

    如果文本设置为小于 16 像素,iPhone 会稍微缩放表单域。我建议将移动表单字段的文本设置为 16 像素,然后将大小改回为桌面。

    禁用缩放的答案对可访问性没有帮助/视力不佳的用户可能仍希望在较小的手机上进行缩放。

    例子:

    # Mobile first
    input, textarea, select {
      font-size: 16px;
    }
    
    # Tablet upwards
    @media (min-width: 768px) {
      font-size: 14px;
    }
    

    【讨论】:

    • 很好!但是如果我的文本超出了选择框的整个宽度怎么办?在这种情况下我该怎么办?
    • 如果您的起始选项消息适合,那么这就足够了。一旦他们选择了一个选项,即使稍微截断,他们也可能会记住它是什么。但是,是的,如果它说“请选择一个公司……”,那就更成问题了
    • 这个答案有效,似乎提供了最不突兀的方法。谢谢!
    【解决方案5】:

    我参加聚会有点晚了,但我找到了一个非常巧妙的解决方法,它只能通过 css 操作来解决这个问题。就我而言,由于设计原因,我无法更改字体大小,也无法禁用缩放。

    由于如果文本设置为小于 16 像素,iPhone 会稍微缩放表单字段,我们可以欺骗 iPhone 认为字体大小为 16 像素,然后将其转换为我们的大小。

    例如,当我们的文本为 14px 时,它会缩放,因为它小于 16px。因此我们可以根据 0.875 变换尺度。

    在以下示例中,我添加了填充以显示如何相应地转换其他属性。

    .no-zoom {
        font-size: 16px;
        transform-origin: top left;
        transform: scale(0.875);            //  14px / 16px
        padding: 4.57px;                    // 4px / 0.875
    }
    

    希望对你有帮助!

    【讨论】:

    • 这是一个令人讨厌但也很聪明的黑客,我不喜欢黑客......但在这种情况下,这是此页面上的最佳答案,如果您必须停止缩放并且仍然没有其他选择想要保持设计原样。非常感谢! :)
    【解决方案6】:

    如果字体大小小于 16 像素,iOS 会缩放页面以显示更大的输入字段。

    仅在单击任何字段时,它会缩放页面。所以点击后,我们将其设为 16px,然后更改为默认值

    下面的 sn-p 对我来说很好,并且针对移动设备,

    @media screen and (max-width: 767px) {
     select:active, input:active,textarea:active{
            font-size: 16px;
     }
    }

    【讨论】:

      【解决方案7】:

      试试这个:

      function DisablePinchZoom() 
      {
          $('meta[name=viewport]').attr("content", "");
          $('meta[name=viewport]').attr("content", "width=yourwidth, user-scalable=no");
      }
      
      function myFunction() 
      {
          $('meta[name=viewport]').attr("content", "width=1047, user-scalable=yes");
      }
      
      
      <select id="cmbYo" onchange="javascript: myFunction();" onclick="javascript: DisablePinchZoom();">
      </select>
      

      DisablePinchZoom 将在 onchange 之前触发,因此在触发 onchange 时缩放将被禁用。 在onchange函数上,最后可以恢复初始状态。

      在 iPhone 5S 上测试

      【讨论】:

        【解决方案8】:

        将所有“选择”字体大小设置为 16 像素

        选择{ 字体大小:16px; }

        【讨论】:

          【解决方案9】:

          我认为你不能对孤立的行为做任何事情。

          您可以尝试的一件事是完全不缩放页面。如果您的页面是为手机设计的,这很好。

          <meta name="viewport" content="width=device-width" />
          

          您可以尝试的另一件事是使用 JavaScript 构造而不是通用的“选择”语句。创建一个隐藏的 div 来显示您的菜单,在 javascript 中处理点击。

          祝你好运!

          【讨论】:

            【解决方案10】:

            在这里回答:Disable Auto Zoom in Input "Text" tag - Safari on iPhone

            您可以防止 Safari 在用户输入期间自动放大文本字段而不禁用用户的捏缩放功能。只需添加maximum-scale=1,但忽略其他答案中建议的用户规模属性。

            如果您的图层中有一个表单在缩放时会“浮动”,这会导致重要的 UI 元素移出屏幕,这是一个值得选择的选择。

            &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"&gt;

            【讨论】:

              【解决方案11】:

              尝试添加这个 CSS 来禁用 Ios 的默认样式:

              -webkit-appearance: none;
              

              这也适用于具有特殊样式的其他元素,例如 input[type=search]。

              【讨论】:

                【解决方案12】:

                已经阅读了几个小时,最好的解决方案是这里的 jquery。这也有助于 iOS Safari 中的“下一个选项卡”选项。我在这里也有输入,但可以随意删除或添加。基本上 mousedown 在焦点事件之前触发并诱使浏览器认为它的 16px。此外,focusout 将触发“下一个选项卡”功能并重复该过程。

                $(function(){
                    $('input, select').on("mousedown focusout", function(){
                        $('input, select').css('font-size','16px');
                    });
                    $('input, select').on("focus", function(){
                        $('input, select').css('font-size','');
                    });
                })
                

                【讨论】:

                  猜你喜欢
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  • 2011-02-25
                  • 1970-01-01
                  • 2012-01-05
                  • 1970-01-01
                  • 1970-01-01
                  • 1970-01-01
                  相关资源
                  最近更新 更多