响应网站由于缩放问题不能正确显示水平线 [英] 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...

这里是一个示例链接，用于 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 =viewportcontent =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/

推荐答案

这不是一个真正的问题。你的代码很好。

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

下面你会看到我拍的几张截图。我通过Android 2.3.3和4.4在虚拟机上运行小提琴，然后使用缩放进行播放。顶部的两张图片是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.

编辑：您可能需要加载在新窗口中图片网址查看真实的东西。我不知道如何链接此处的图片对不起！

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屋！