Адаптивный сайт неправильно показывает горизонтальные линии из-за проблемы с масштабированием

Я добавляю адаптивную функцию на веб-сайт, используя 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/

Ответы на вопрос(1)

Ваш ответ на вопрос