Question

http://demo.dev.rbmleads.com/personalloan/v10/

我制作了一个工作表单的移动版本，但无法弄清楚为什么它会像这样伸展。它应该是这样的：

enter image description here

但它看起来像这样：

enter image description here

我认为这是一个带有一个集合的杂散元素，但所有元素都设置为auto或％。任何的想法？感谢。

Answer 1

您是否声明了viewport元标记？

将此添加到您的<head>：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

如果您需要禁用缩放：

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

Answer 2

确保设置元标记

<meta name="viewport" width="device-width" />

这将使你的100％更接近100％

您可以设置一些其他参数，如初始缩放和高度，但我认为此宽度将解决您的问题

编辑：您可以尝试的另一件事是查询宽度并设置字体大小

一些LESS的例子：

html,body{
    font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
    font-size: 16px;

    @media only screen and (max-width : 600px) {
        font-size: 11px;
    }
}

基本上，这会将您的基本字体设置为手机上的16px和桌面上的11px。

Answer 3

可能只是解析在Firefox中尝试 Ctrl + Shift + M 。同时设置<meta name="viewport" content="width=device-width, initial-scale=1.0">并使用比例。

您的沙箱无法访问，因此很难找到问题。

移动网站拉长了

3 个答案: