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，他们有更多跨平台示例的类似信息。

键盘打开：

隐藏键盘（我通过连接蓝牙键盘进行模拟）：