Question

我使用cordova（phonegap）和angularJS框架在Xcode中创建非本机iOS应用程序

我使用以下方法区分不同方向的css属性：

@media all and (orientation:portrait) {  }

和

@media all and (orientation:landscape) { }

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

对于为什么会发生这种情况的任何建议表示感谢。提前谢谢。

Answer 1

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

<强>替换

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <title>Pomodoro</title>
</head>

<body>
  <h1><img id="icon" src="https://png.icons8.com/windows/100/000000/tomato.png">Pomodoro Clock</h1>

  <div id="contador">
    <p id="ct">Session time:</p>
    <button id="tp" value="1" onclick='add()'>+</button>
    <button id="tm" value="1" onclick='minus()'>-</button>
    <div id="pausa">
      <button id="bp" value="1" onclick='add2()'>+</button>
      <button id="bm" value="1" onclick='minus2()'>-</button>
      <p id="bt">Break Time:</p>
      <input type="text" size="25" value="5" id="break" min="1">
    </div>
  </div>

  <div id="circle" onclick='countdown()'>

    <input type="text" id="input" size="25" value="1" min="0">
    <input type="text" size="25" value="1" id="count" min="1">
    <input type="text" size="25" value="PAUSE" id="pause" min="1" onclick='break()'>





  </div>

<强>与

@media screen and (orientation : landscape)

<强>替换

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

<强>与

@media screen and (orientation : portrait)

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

Answer 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" />

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

2 个答案: