Почему не совпадает верстка с реальными устройствами?
Вы неправильно настроили панель разработчика. У мобильных телефонов количество физических пикселей больше, чем количество «css-пикселей» в браузере. Разница выражается параметром Device Pixel Ratio (DPR) — это коэффициент умножения, сколько физических пикселей в одном «css-пикселе».
take.ms/v1Ms8
В режиме Responsive у Хрома по-умолчанию DPR=1.0 (у макбука по-умолчанию 2.0, т.к. retina-экран). Вы выставили ширину вьюпорта 540px, но у вашего телефона, скорее всего, DPR = 1.5 и разрешение в браузере соответствует 360px (540 / 1.5 = 360).
Вам надо включить отображение DPR и доработать верстку на малых экранах от 540 до 320px.
Павел Радьков, хм,интересно, а как узнать этот DPR своего смартфона?