为什么移动浏览器在放大输入字段时会忽略我的媒体查询?

时间:2012-12-05 12:07:56

标签: css mobile zoom textfield viewport

我正在将我们所做的网站转换为移动网站。 到目前为止,一切都很好,在阅读了一些有关像素密度和所有元标签后,我已经整理了一个非常漂亮的网站,它在手机屏幕上设计得很好,但到目前为止我只有一个问题。

无论我尝试什么,浏览器都会在焦点处放大到文本字段。这通常不会有问题,但是当它发生时,它似乎忽略了我的媒体查询css ..我有我的银河系s3插入我的桌面chrome以调试页面,我可以看到页脚(在我的媒体查询中显示无)在放大文本框时显示。 (以及随之而来的忽略我的媒体查询的其他css更改)。

所以我正在寻找一种方法来移除缩放功能(在这里阅读很多关于它的文章,没有适用于移动铬和股票galaxy s3浏览器,还不知道有关iphone或windows的信息),或者制作放大时我的样式表工作。甚至更好,放大时的其他样式,所以除了文本字段我可以删除所有内容!

我当前的视口设置为:

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

谢谢!

1 个答案:

答案 0 :(得分:3)

我刚解决了。我的媒体查询包括“和(方向:肖像)”,因此要考虑到肖像方向,但没有为landspace指定相同或其他样式。因此,当键盘因为文本域获得焦点而出现时,它必然会从视口中移除可用空间,使其成为空间,使页面依赖于桌面css。所以,如果您遇到同样的问题,请查看您的代码! :)