Я разрабатываю https://contentbase.co. Главная страница (как и на момент написания) была разработана / протестирована с помощью панели инструментов устройства консоли разработчика Chrome. Правильный видовой экран установлен, и система столбцов Bootstrap использовалась для создания стека материала.
Все элементы правильно складываются до очень узкой ширины, пока я получаю страницу со строкой пользовательского агента на рабочем столе (что делает консоль разработчика). Я только что узнал, что реальные мобильные устройства будут отправлять по умолчанию строку агента мобильного пользователя, и это меняет способ отображения страницы.
На консоли разработчика, он хорошо показывает в ширину 1080px. На реальном мобильном устройстве шириной 1080p это делает элементы и шрифты намного больше. Контент становится шире экрана. Это ошибка, которую выдает консоль поиска Google. И это правильно, потому что теперь я могу прокручивать по горизонтали (большой нет, нет).
Когда я говорю браузеру моего смартфона, чтобы он запрашивал версию сайта для настольного компьютера, он показывается очень хорошо ... потому что он отправляет строку агента пользователя на рабочем столе.
Я подумал, что мне понадобится сброс CSS. Поэтому я скопировал вставленную таблицу пользовательского агента webkit , которая используется в настольном компьютере Chrome, в css в надежде переопределить таблицу стилей пользовательского агента, предлагаемую мобильным Chrome. К сожалению, это не было панацеей.
Самая большая проблема с этой проблемой заключается в том, что я не уверен, как лучше постоянно тестировать ее во время разработки. Я должен посетить его с реальным смартфоном, поэтому отладка на localhost кажется невозможной.
Итак, я должен опубликовать проблемный html / css в реальном домене, который я могу посетить с помощью своего смартфона, затем отладить и перезагрузить с помощью смартфона. Но проблема с мобильным Chrome заключается в том, что нет такого инспектора элементов, как у меня на рабочем столе Chrome. Это затрудняет отладку проблемы.
Эти обстоятельства затрудняют поиск проблемы, не говоря уже о ее устранении.
Не могу представить, что я первый столкнулся с этим. Каков наилучший способ разработки / отладки / тестирования страниц Bootstrap на реальных мобильных устройствах?
И что мне лучше всего сделать, чтобы мобильная версия моего сайта (полученная с помощью строки агента мобильного пользователя) отображала ту же версию, что и настольная версия моего сайта (полученная с помощью строки агента пользователя на рабочем столе)?
Является ли это известной проблемой, и есть ли известное решение с наилучшей практикой?
Обновление:
Я опубликовал несколько тестовых файлов, к которым я могу получить доступ со своего смартфона. Я также выводю ширину контейнера div на странице. Оказывается, мой смартфон отображает его на ширине 330 пикселей. Раньше я думал, что он отображает страницы с исходным разрешением шириной 1080 пикселей. При той же ширине 330 пикселей, эмулятор устройства моей консоли разработчика отображает точно такую же проблему. Так что теперь я могу, по крайней мере, иметь удобный для пользователя опыт отладки.