IOS на мобильных не показывая 1px границ CSS правильно

Question

У меня есть Bootstrap заголовка настроенного с CSS границей, чтобы дать ему 2px и 1px эффект тени, как это:

<div class="navbar" role="navigation"> 
    <div class="header"> 
    </div> 
</div> 

И CSS является:

.navbar{ 
border-bottom: 1px solid #C7C7C7; 
} 
.header{ 
border-bottom: 2px solid #EFEFEF; 
} 

HTML-теги на странице:

<meta name="viewport" content="width=970" /> 

по какой-то странной причине, при просмотре страницы в прошивке на мобильном деви как iPad или iPhone, он не показывает границы правильно. Первоначально при загрузке он показывает только 1px линии, и при масштабировании страницы другие 2px видны, но каким-то образом искажаются. Полная строка не отображается.

Что может быть неправильным здесь? Является ли это проблемой iOS или ...?

Answer 1

Я нашел решение. Я изменил метатеги на:

<meta name="viewport" content="width=device-width, initial-scale=1">