HTML 在手机上无缩放

Question

在我的网站上 zaxapps当您点击任何输入或字段时，它会在移动设备上缩小。

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

我添加了这段代码，但它并没有阻止它。有什么想法吗？

Answer 1

这是由于网站认为由于键盘打开导致方向从纵向变为横向造成的。

键盘覆盖了部分网站，占用了屏幕空间，导致足够的分辨率变化以使其被检测为横向模式。如果键盘以某种方式被隐藏，或者连接了蓝牙键盘，则该站点看起来是正确的。我已附上屏幕截图来说明问题。

经过一番搜索，我找到了this site .添加一个orientation 媒体查询似乎可以解决这个解析漏洞。这是他们的 iPhone 6 纵向示例:

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

更新:另请查看 this CSS-Tricks page , 他们有更多跨平台示例的相似信息。

---

打开键盘:

隐藏键盘(我通过连接蓝牙键盘来模拟):