由于缩放问题，响应网站没有正确显示水平线条

我正在使用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/

来源

2014-05-15 Learning

测试你的代码在本地和使用JS小提琴链接，您提供的，有和没有meta标签，并且不能重新在Android 4.4（包括股票和Chrome浏览器）的问题。你在看什么设备？ –

我使用的是Android 2.3.7，这里是你可以尝试http://fiddle.jshell.net/G2rCT/4/show/的链接，我也尝试过最新的移动Opera浏览器相同的问题。 – Learning

这是不是真的就可以解决的问题。你的代码很好。

下面你会看到我拍摄的一些截图的图像。我通过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才能看到真实的东西。我不知道如何链接这里的图片抱歉！

Scaling issues on android

来源

2014-05-15 12:22:38

由于缩放问题，响应网站没有正确显示水平线条

回答

相关问题