当 iOS 键盘处于活动状态时，CSS 方向会自动切换到横向

Posted 2023-03-06

【中文标题】当 iOS 键盘处于活动状态时，CSS 方向会自动切换到横向

【英文标题】：CSS orientation automatically switches to landscape when iOS keyboard is active

【发布时间】：2014-06-12 14:28:06

【问题描述】：

我正在使用 cordova(phonegap) 和 angularJS 框架在 Xcode 中制作一个非原生 ios 应用程序

我通过以下方式区分不同方向的 css 属性：

@media all and (orientation:portrait)   

和

@media all and (orientation:landscape)  

在竖屏模式下的 Xcode 模拟器中，当单击文本字段时，会弹出屏幕键盘。发生这种情况时，它会切换到横向模式的 CSS，同时仍保持纵向。这显然会打乱所有格式。

对于为什么会发生这种情况的任何建议，我们将不胜感激。 提前致谢。

【参考方案1】：

要解决此问题，请尝试将方向检查更改为纵横比：

替换

@media screen and (orientation : landscape)

与

@media screen and (min-aspect-ratio: 13/9)

替换

@media screen and (orientation : portrait)

与

@media screen and (max-aspect-ratio: 13/9)

来源：https://www.robinosborne.co.uk/2014/09/12/android-browsers-keyboards-and-media-queries/

【参考方案2】：

我在 iOS 7 中遇到了类似的纵向/横向模式问题，这已解决：

检查您的 html 元标记是否有类似的内容：

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

用这个替换它：

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

【讨论】：

谢谢你的作品。我刚刚根据最小和最大页面宽度定义了方向。即纵向：@media screen and (max-width: 956px)