android - 响应式网页表单输入在手机上的奇怪行为

问题描述

我正在开发一个带有表单输入的响应式网页。在手机上测试时，点击输入框输入内容时屏幕放大，输入的文本框在左侧被截断，我输入的内容不会显示在屏幕上。

这是进入输入模式之前的屏幕：

这是进入输入模式时屏幕的样子：

这是我捏住屏幕并一直放大时的样子：

那么我在响应式网页设计方面做错了什么导致这种奇怪的行为？我在手机上的 Chrome 和 Firefox 上测试了该页面。测试时关闭了浏览器中的“请求桌面模式”。

我怀疑我的代码中唯一可能导致任何奇怪的部分可能是这部分：

@media only screen and (orientation: landscape)
{   
    .main-box { width: 100%; }
    img.full    { width: 100%; }        

    .main-body
    {
        width: 600px;
        height: 80%;
        z-index: 1;
        position: absolute;
        left: 50%;
        top: 50px;
        transform: translate(-50%, 0%);     
        background-color: #fff7;        
    }    
    ... /*other unrelated styling stuff*/
}

由于手机的屏幕分辨率太多，我只能假设当屏幕处于纵向时，它是一个移动设备（手机和平板电脑都一样）。当屏幕处于横向模式时，它最有可能显示在桌面 PC 上（横向的平板电脑和手机被视为 PC 屏幕）并将内容限制在以屏幕为中心的 800 像素区域内显示。

.main-box 是一个包含整个页面的 div 容器，它将包含一个覆盖浏览器的整个客户端。

.main-body 是一个 div，在纵向模式下将占据 100% 的宽度，在横向模式下将占据屏幕中心的 600px 区域。

我猜可能导致奇怪行为的原因可能是在输入模式下，部分屏幕区域被虚拟键盘占据，使实际显示区域变为横向，因此布局被破坏。

那么，任何人都可以通过展示使输入模式正常工作所需的 Voodoo 技巧（如果它们确实存在）来帮助我吗？提前致谢。

或者，谁能告诉我如何确定手机的屏幕宽度？它似乎是按比例缩放的，我有一部具有 FHD (1080 x 1920) 原始分辨率的手机，但是根据我在调整页面以适应浏览器屏幕而不需要“请求桌面版本”来正确显示时得到的结果，“虚拟”屏幕宽度要小得多，可能在 350 到 400 像素左右。

标签： androidhtmlcss

android - 响应式网页表单输入在手机上的奇怪行为

问题描述

解决方案

推荐阅读