Размеры элементов для разных экранов

Заметил что с размерами экрана на телефонах творится что-то непонятное. Решил проверить - создал 3 блока шириной 1080px, 967px(подобрал для своего экрана) и 900px. Открываю страницу на телефоне Redmi Note 5, у которого экран 2160 x 1080 и вижу, что блок в 1080px вылезает за экран, а 967px подходит как раз.

Дальше еще интереснее! Если перевернуть телефон горизонтально, то блок в 1080px должен занимать ровно половину экрана, но вместо этого он опять таки вылезает за экран!

У меня что-то не так с телефоном или я неправильно понимаю размеры в css? Если открыть эту страницу в хроме через инструмент разработчика на Pixel2 с разрешением 411 х 731 то история повторяется.

Почему так происходит?