2

我正在创建小型网站，其中包含带有一些文本输入的表单。我正在使用这个元标记：

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

在移动设备上正确显示某些元素。我正在使用 Android Chrome 进行检查。

这会导致问题：我的表单边框（简单 div）和文本输入的边框变得很粗，但它设置为 1px。所以，这是没有元标记的形式：

没有元

这是带有元标记的表格：

与元

所以，第一个问题是：

如何防止 1px 随着设备宽度元标记的增加而增加？

此外，正如我们所见，文本输入甚至按钮（这是 div，但不是提交输入！）的顶部和底部填充是不同的。它在第二张图像上更明显。我明白，这是由 Android 输入下划线引起的（至少对于文本输入而言）。当您开始输入单词时，它会带有下划线以进行自动更正或类似的事情。

在第一种情况下下划线宽度也是一个像素，所以差异还不错（但我也想修复它）。其次它也很厚，所以有很大的不同：

粗下划线

所以，逻辑问题是：

如何防止下划线宽度随着设备宽度元标记的增加而增加？

当然，我不明白。

为什么这种增加机制会影响简单的 div ？？？里面没有打字

这是 div 代码：

<div id="form-submit">ЗАБРОНИРОВАТЬ</div>

    div#form-submit {
    display: table;
    margin-bottom: 1em;
    border: 1px solid black;
    background-color: white;
    outline: 0px;
    font-size: 0.24em;
    font-family: inherit;
    padding-left: 0.3em;
    padding-right: 0.3em;
    padding-top: 0.5em;
    padding-bottom: 0.5em;
    border-radius: 0.7em;
    margin: 0 auto;
    margin-bottom: 1.6em;
    cursor: pointer;
}

最后，您可以看到第二张和第三张图像之间的差异。当我开始打字时，按钮文本向中心移动了一点......

如果有人解释任何问题，那就太好了......

4

1 回答 1

1

您的问题是您的网站不是为移动设备量身定制的，但您正试图在移动设备上查看它。

移动设备有一个 .. 让我们称之为功能，在选择输入框等可编辑字段后，它将放大该部分（因此您可以阅读您正在输入的文本。）如果您的手机没有这会自动根据您的页面编码方式，您无法阅读文本。

您可以通过编辑<meta />标签来阻止手机放大：

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

这告诉浏览器：

  1. 将初始宽度设置为视口宽度（屏幕宽度。）
  2. 不允许用户缩放页面
  3. 将页面的初始缩放设置为 100%
  4. 将页面的最大可能比例（由浏览器或用户启动）设置为 100%。

最后一个属性是阻止手机放大文本字段的属性。

但是，您应该使您的网站与移动设备兼容，如果您希望人们在移动设备上查看它，但不允许他们放大。在为桌面设计的网站上不允许他们放大是不好的做法。

谷歌响应式设计的想法和技术，将您的桌面设计改造为移动友好。

于 2014-11-28T03:24:36.547 回答