Поместите это в <head> вашей страницы:
<meta name="viewport" content="width=device-width, initial-scale=1">
Мета-тег viewport упрощает что-то, что довольно странно , заставляя браузер вести себя определенным образом, вместо того, чтобы браузер пытался оценить, каков правильный способ отображения страницы. Как вы обнаружили, использования CSS-точек останова может быть недостаточно - для некоторых проектов и браузеров это будет хорошо, но это зависит от браузера.
width=device-width использует пользовательское значение (device-width), как оно звучит - установите ширину этого окна просмотра на ширину устройства. initial-scale означает что-то вроде установки увеличения до 100%. Итак, вместе: пусть область просмотра будет такой же широкой, как устройство, и не увеличивайте или уменьшайте масштаб.