问题
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.
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...
here is a sample link to fiddle http://fiddle.jshell.net/G2rCT/3/
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.
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.
Mobile sample can he checked here http://fiddle.jshell.net/G2rCT/4/show/
回答1:
This isn't really an issue you can solve. Your code is fine.
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)
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.
Edit: 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!
来源：https://stackoverflow.com/questions/23676735/responsive-site-not-showing-horizontal-lines-correctly-due-to-scaling-issue