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

---

随着键盘开：

随着键盘隐藏（我通过连接蓝牙键盘模拟这一点）：