html - 由于缩放问题，响应式网站无法正确显示水平线

Question

我正在使用 css 向网站添加响应功能，这个网站已经有一段时间了，现在正在向它添加响应功能，以便它可以支持移动版本。

我面临一个问题，假设有多个行，由一条水平线分隔。在某些地方我正在使用 hr在某些地方我只是使用 div到...

这里是 fiddle 的示例链接 http://fiddle.jshell.net/G2rCT/3/

当我查看桌面版本时，线条的高度正好显示为 1 像素，而当我在移动设备上查看时，替代线条的高度显示为 2 像素。

但是当我放大时它看起来很好，我的问题是缩放系数。我也在使用 <meta name="viewport" content="width=device-width" />改变了初始比例值，但没有任何区别。

我是不是遗漏了什么，问题是我使用视口(viewport)的方式。

手机样本可以在这里查看http://fiddle.jshell.net/G2rCT/4/show/

Answer 1

这不是您真正可以解决的问题。您的代码没问题。

下面您将看到我截取的一些屏幕截图。我在虚拟机上通过 Android 2.3.3 和 4.4 运行 Fiddle，然后进行缩放。最上面的两张图片是 2.3.3 和 4.4，缩放到 100% 分辨率。我屏幕上的 1 个像素是“手机”上的 1 个像素。可以看到线条很好(我觉得4.4的截图可能不是1:1，但是2.3.3的截图很清楚)

但在下面，您会看到我在哪里使用相同的设备但将手机缩小，因此不再是 1:1。您可以在这些屏幕截图中看到您描述的问题，这意味着您的手机屏幕和缩放方式是这里的问题。

编辑:您可能需要加载 image URL in a new window看到真实的东西。我不确定如何在此处链接图片，抱歉!