由于缩放问题，响应式站点未正确显示水平线答案

【问题标题】：Responsive site not showing horizontal lines correctly due to scaling issue由于缩放问题，响应式站点未正确显示水平线
【发布时间】：2014-07-03 19:29:16
【问题描述】：

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

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

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

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

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

我是否遗漏了什么问题是我使用视口的方式。

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

【问题讨论】：

在本地测试了您的代码，并使用您提供的 JS Fiddle 链接，有和没有元标记，并且无法在 Android 4.4（股票和 Chrome 浏览器）上重新创建问题。您在什么设备上查看它？
我使用的是 android 2.3.7 这里是你可以尝试的链接fiddle.jshell.net/G2rCT/4/show 我也在最新的移动歌剧浏览器同样的问题上尝试过同样的..

标签： html css responsive-design viewport

【解决方案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 才能看到真实的东西。我不知道如何在这里链接图片对不起！

【讨论】：