Law*_*son 4 mobile viewport meta-tags responsive-design device-width
我已经建立了十几个响应式网站,从未遇到过这个问题.基本上,我正在使用宽度=设备宽度的视口的元标记,但iPhone和Android设备仍在缩放.出于某种原因,我在Windows手机上没有这个问题.
这是头部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也在样式表之前加载.
我已经尝试了许多不同的东西,包括:
我完全没有想法,似乎已经筋疲力尽了我可以通过谷歌找到/尝试的任何新东西.非常感谢您提供的任何帮助!
经过大量测试和继续搜索后,我想出了一个看似非常有效的修复方法.我看到类似问题的另一个解决方案提出了以下建议:
<meta name="viewport" content="width=640, initial-scale=.5, user-scalable=no" />
起初,这似乎是一个不错的解决方案,因为它适用于大多数手机.它有点让我烦恼,因为它显然不适合使用任何设备宽度.答案可以在这里找到:
Android视口设置"user-scalable = no"会中断视口的宽度/缩放级别
此解决方案适用于大多数移动设备,但有些设备无效,导致显示器使用不正确的缩放.
我相信上述解决方案无效的原因是因为并非所有移动设备都使用基座320进行缩放.因此,当设备宽度不起作用时,这会导致约束不一致.
我尝试了很多不同的东西,但后来最终尝试了以下(到目前为止)似乎非常有效:
<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而产生的止损问题.
虽然这里的答案可能有助于未来的访问者解决更复杂的更加过时的代码问题,但我强烈建议任何新的开发都符合最新的响应标准.如果您的标记和CSS符合,那么为什么您不希望在响应中使用视口的标准元(以下)的原因很少:
<meta name="viewport" content="width=device-width, initial-scale=1">