window.innerWidth в JS не равен `width: 100%` in css

Question

Я создаю веб-страницу на мобильном телефоне, которая будет соответствовать ширине экрана 100%.

Однако, когда я создал некоторые элементы с JavaScript и установил ширину в window.innerWidth, они были бы намного шире, чем статические элементы, которые устанавливают width: 100% в CSS. (На iPhone (6))

width: 100% устанавливает эти элементы 375px, которые я думаю, это правильно, так как разрешение экрана 1334 х 750. Однако window.innerWidth является 488px, по какой причине я действительно не понимаю, ,

Является ли это ошибкой браузера, который я тестирую, или что-то пропустил для экрана сетчатки?

Кстати, я использую width:480px;max-width:100% для установки статических элементов. Meta-view-port похожа на <meta name="viewport" content="width=device-width, initial-scale=1.0">

Answer 1

Коэффициент пикселей и боковые панели могут привести к тому, что внутренняя ширина окна будет отличаться в зависимости от устройства. Если вам нужно проверить ширину окна в javascript, чтобы ваши медиа-запросы совпадали. Используйте функцию window.matchmedia.

JS

if (window.matchMedia('max-width:800').matches){ 
     console.log('tablet mode'); 
    }