Это первый раз, когда я сталкиваюсь с этой проблемой с Bootstrap CSS.
У меня есть дизайн в браузере, который выглядит хорошо, но когда я показываю ту же страницу на реальном мобильном устройстве, CSS я совершенно не прави я не могу понять, почему.
Я протестировал несколько ответов от переполнения стека, но это не решает проблему.Я несколько раз пытался очистить кэш на мобильном устройстве, пробовал режим инкогнито, но я все еще вижу неправильный CSS.Я также проверил, чтобы текст выравнивал заголовок по центру, он отображается правильно в браузере (ширина мобильного устройства), но не на мобильном устройстве (iPhone 6 S Plus), на мобильном устройстве он выравнивается по левому краю.
Результат также неверен на мобильном устройстве с Chrome и Safari.
Это метатег в header.php:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Вот как это выглядит в браузере и на мобильном устройстве.:
Браузер (Chrome): CSS в браузере изменен до ширины мобильного телефона
Мобильное устройство CSS: как оно выглядит на мобильном телефоне