gpt4 book ai didi

mobile - 为什么我的视口(viewport)标签不能在大多数移动设备上正确使用设备宽度(无缩放)?

转载 作者:行者123 更新时间:2023-12-04 22:46:51 26 4
gpt4 key购买 nike

2020 年 12 月更新:鉴于这篇文章仍然活跃,我必须强调这里没有适用于现代 Web 开发的答案。实际上,这里的几乎所有答案都会使您的网站在容纳残疾人方面处于不稳定的境地。您的响应式网站应该包含在 head 中的唯一内容标签是:

<meta name="viewport" content="width=device-width, initial-scale=1">
如果您试图将用户锁定在特定范围内(例如诉讼甚至政府罚款),那么不仅仅是用户体验面临风险。
-- 继续自担风险 --
更新 03/2019:这个问答仍然有一些事件,近 5 年我的问题出现了。请注意,此问题的部分原因是当时较旧的移动设备更常见的违规行为。对于今天的浏览器和设备,摆弄视口(viewport)可伸缩性将是解决更大问题的鞋拔,这可能是您的 CSS 或您的标记中的问题。
我已经建立了十几个响应式站点,但从未遇到过这个问题。基本上,我使用宽度=设备宽度的视口(viewport)元标记,但 iPhone 和 Android 设备仍在缩放。出于某种原因,我在 Windows 手机上没有这个问题。
这是head html的摘录:
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
这是主要包装器的 HTML(注意最外层的 div 是从 jquery.mobile 添加的:
<body class="html front logged-in no-sidebars page-node mobile-detect-class ismobiledevice" >   
<div data-role="page" data-url="/?mobile_switch=mobile" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 568px;">
<div class="container">
</div>
</div>
</body>
这是主要的包装 CSS:
html,body { margin: 0; padding: 0; background-color: #d5d5d5; font-family: 'HelveticaNue', Arial; }
body {background: transparent none no-repeat 50% 0; min-height:100%; height:auto; background-size: auto 100%; width:auto;}

body > div {width: 100%; height: auto; }
.container { background: #fff none no-repeat 50% 0; margin-bottom: 20px; width:100%; position:relative;}
Bootstrap 也在样式表之前被加载。
我已经尝试了许多不同的方法,包括:
  • 删除 jquery.mobile
  • 删除 Bootstrap
  • 将 Bootstrap 更新到最新版本
  • 将视口(viewport)标签更改为以下内容:
  • 宽度=设备宽度,初始比例=1.0
  • 宽度=设备宽度,初始比例=1.0,用户可缩放=否
  • 宽度=设备宽度,初始比例=1.0,用户可缩放=0
  • 宽度=设备宽度,初始刻度=1.0,最小刻度=1.0,最大刻度=1.0
  • 调整与宽度/最大宽度相关的各种 CSS 属性

  • 我完全没有想法,似乎已经用尽了我能通过谷歌找到/尝试的任何新东西。我将不胜感激您能提供的任何帮助!

    最佳答案

    经过大量测试和继续搜索,我想出了一个似乎非常有效的修复方法。我看到的类似问题的另一个解决方案提出了以下建议:

    <meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />

    起初,这似乎是一个不错的解决方案,因为它适用于大多数手机。不过它让我有点恼火,因为它显然不是专门针对任何设备宽度工作的。这个答案可以在这里找到:

    Android viewport setting "user-scalable=no" breaks width / zoom level of viewport

    此解决方案适用于大多数移动设备,但在某些移动设备上无效,导致显示器使用不正确的缩放。

    我认为上述解决方案无效的原因是并非所有移动设备都使用base 320进行缩放。因此,当 device-width 不起作用时,这会导致约束不一致。

    我尝试了很多不同的东西,但最终尝试了以下(到目前为止)似乎非常有效的方法:
    <meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">

    我相信这个标签的不同之处在于它告诉设备使用它的原始尺寸,但随后添加了一个比例因子,告诉它不要像通常那样放大。

    我从来没有找到任何解决问题的 CSS 调整,我欢迎将来可能会进一步澄清问题/解决方案的任何其他答案。

    我想补充的另一件事是,对于较大的设备(平板电脑,此问题中的网站不是为平板电脑设计的)可能更有效的替代元标记可能是设置最大比例而不是使用用户-可扩展的。像这样:
    <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=0.5">

    编辑/更新 2018:

    尽管这是一个非常过时的问题,但这个问题仍然受到很多人的欢迎。当然,事后看来,经过更多的响应式经验之后,我可以说最初的问题和解决方案都是基于构建不良的响应式 CSS 和 HTML 导致的权宜之计问题。

    虽然这里的答案可能会帮助 future 的访问者解决在改造更过时的代码时遇到的问题,但我强烈建议任何新的开发都符合最新的响应标准。如果您的标记和 CSS 符合要求,那么您不希望响应式视口(viewport)的标准元数据的原因很少(如下):
    <meta name="viewport" content="width=device-width, initial-scale=1">

    关于mobile - 为什么我的视口(viewport)标签不能在大多数移动设备上正确使用设备宽度(无缩放)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21738675/

    26 4 0
    Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
    广告合作:1813099741@qq.com 6ren.com