键盘方向和媒体查询错误（应用程序模式） [英] Keyboard orientation and media query bug (app mode)
问题描述
- 将此网页添加到您的iOS7主屏幕
- 打开它，并关注输入字段（键盘弹出）
- 文字变成红色，因为手机认为它处于横向模式
周围有什么方法吗？或者我们应该责怪Apple？
Is there any way around it? Or should we just blame Apple?
注意：此问题仅发生在应用模式，而不是常规Safari浏览模式。它在iOS6中运行良好。
Note: This problem only occurs in app-mode, not in regular Safari browsing mode. And it worked fine in iOS6.
代码：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<style>
body {
color: blue;
}
@media (orientation:landscape) {
body {
color: red;
}
}
</style>
<body>
<h3>this text will go red when in landscape</h3>
<input type="text" />
</body>
推荐答案
这显然是一个iOS7错误。在我的应用程序中，我发现即使专注于使用此媒体查询打开屏幕键盘的输入字段，我也可以可靠地区分纵向模式和横向模式：
This is clearly an iOS7 bug. In my application I found that I can reliably distinguish portrait mode from landscape mode even when focused on an input field with the on screen keyboard open using this media query:
@media only screen and (device-width: 768px) and (device-height: 1024px) and
(min-aspect-ratio: 4/3) {
/* landscape differences here */
}
我无法使用orientation：landscape因为规则如果键盘打开，即使在纵向模式下也会被激活。
I couldn't use orientation: landscape because the rule would get activated even in portrait mode if the keyboard is open.
我可能需要一个不同的iPhone规则，但我还没有那么远。
I probably need a different rule for the iPhone but I haven't gotten that far yet.
这篇关于键盘方向和媒体查询错误（应用程序模式）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
