由于缩放问题，响应式站点未正确显示水平线 [英] Responsive site not showing horizontal lines correctly due to scaling issue

问题描述

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

I am adding responsive feature to a website using css, this website has been their for sometime and now responsive feature is being added to it so that it can support mobile version.

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

I am facing one issue suppose a have multiple row which are separated by a horizontal line. in some place i am using hr and in some places i am using simply div to...

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

here is a sample link to fiddle http://fiddle.jshell.net/G2rCT/3/

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

When i view desktop version then lines exactly show as 1 pixels in height and when i view on mobile then alternative line show as if they are 2 pixels in height.

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

But when i zoom in it look fine, I thing issue is with the zoom factor. I am using also <meta name="viewport" content="width=device-width" /> varied the initial-scale value but it doesn't make any difference.

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

Am i missing something i thing problem is the way i am using viewport.

移动示例可以在这里查看 http://fiddle.jshell.net/G2rCT/4/show/

Mobile sample can he checked here http://fiddle.jshell.net/G2rCT/4/show/

推荐答案

这真的不是你能解决的问题.你的代码没问题.

This isn't really an issue you can solve. Your code is fine.

您会在下面看到我截取的一些屏幕截图的图像.我在虚拟机上通过 Android 2.3.3 和 4.4 运行 Fiddle，然后进行缩放.前两张图片是 2.3.3 和 4.4，缩放到 100% 分辨率.我屏幕上的 1 个像素是手机"上的 1 个像素.您可以看到线条很好(我认为 4.4 的屏幕截图可能不完全是 1:1，但在 2.3.3 的屏幕截图中很清楚)

Below you'll see an image of a few screenshots I took. I ran the Fiddle through Android 2.3.3 and 4.4 on virtual machines, then played with the scaling. The top two pictures are 2.3.3 and 4.4, scaled to 100% resolution. 1 pixel on my screen is 1 pixel on the 'phone'. You can see that the lines are fine (I think the 4.4 screenshot might not have been exactly 1:1, but its clear in the 2.3.3 screenshot)

但是在下面，您将看到我使用相同设备但将手机缩小的位置，因此不再是 1:1.您可以在这些屏幕截图中看到您所描述的问题，这意味着您的手机屏幕显示方式和缩放比例是此处的问题.

But below, you will see where I have taken the same device but scaled the phone down, so it was no longer 1:1. You can see the issue you are describing appearing in these screenshots, meaning that the way your phone screen and the scaling is the issue here.

您可能需要在新窗口中加载 图像 URL 以看到真实的东西.抱歉，我不知道如何在此处链接图片！

You might need to load the image URL in a new window to see the real thing. I'm not sure how to link a picture on here sorry!

这篇关于由于缩放问题，响应式站点未正确显示水平线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！