Question

我正在建立一个拥有移动分支的网站。我成功构建了网站，因为PC上的许多浏览器可以采用相同的视图并且工作正常。

现在我正在建立网站，因为移动设备可以从移动Chrome或Firefox移动设备浏览网站。我做到了，但我面临一个小问题。

网站的许多页面都有文本框，如果您使用移动设备点击它，就会知道 - 例如galaxy note 2 - 软键盘会在屏幕上自动显示，在此过程中会发生两件事：

1-屏幕将自动缩放，直到到达您单击的特定文本框。解决方案：我通过这个命令解决它，现在屏幕不会自动缩放。

2-如果我有一个包含文件的页面，主div将改变他的位置，直到达到上面的div -included文件 - 并且不会订购大厅页面。

首先，我将简要介绍一下我的意思：

注意：我的后端是使用Yii框架的php，仅用于信息^ _ *

page.php文件：

    <div id="div1" style="width:100%;position:relative;margin-bottom: 10px"><?php 

       if (Yii::app()->user->isGuest)
      include 'flash.php'; ?></div>


      <div id="div2" style="width:100%;position:relative;margin-bottom: 10px">
     <form action="getup" method:"post"> 
     <input type="text"  name="text1" >
     <input type="text" name="text2" >
     // submit button

      </form>

现在在这个简短的代码之后，我将向您展示正在发生的事情，当从移动Chrome浏览器浏览页面时，页面将被订购，但是如果您单击任何文本框作为text1，例如，发生的是DIV2将自己提升到DIV1之上 - 包含文件 - 因为软键盘会在屏幕的后半部分自动显示。

在这个例子之后我会反对我的问题：

我的问题是：是否有任何代码-CSS或Java Script - 将在软键盘在移动屏幕上显示后自动停止DIV2上升过程？

Answer 1

也许这种行为与你正在使用的css有关？尝试从内联样式中删除position:relative，也许会有所帮助。另一件事是输入应该是自闭标签并且缺少div2结束标签。您不需要将div标签的宽度设置为100％，因为它是默认值。

单击文本框后，移动页面将显示在上方

1 个答案: