Медиа-запрос работает в Chrome и Firefox, но не на мобильных устройствах. - PullRequest
Новая
       1

Медиа-запрос работает в Chrome и Firefox, но не на мобильных устройствах.

0 голосов
/ 04 ноября 2019

У меня есть веб-сайт, когда я выполнял медиазапрос, который правильно работает на моем Chrome и Firefox, когда я изменяю его размер для разных устройств, но когда я просматриваю веб-сайт на мобильных устройствах, возникает проблема с выравниванием, в основном на мобильных устройствах iPhone, которые яЯ не могу просматривать в Chrome и Firefox, поэтому я не могу это исправить

Мой раздел головы, как показано ниже: 

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<!-- css file -->
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/style.css">
<!-- Responsive stylesheet -->
<link rel="stylesheet" href="css/responsive.css">
<!-- Title -->
<title>BookTheParty</title>
<!-- Favicon -->
<link href="images/favicon.png" sizes="128x128" rel="shortcut icon" type="image/x-icon" />
<link href="images/favicon.png" sizes="128x128" rel="shortcut icon" />

Вот ссылка на мой сайт: https://demo.booktheparty.in

Может кто-нибудь подсказать, пожалуйста, как правильно просмотреть проблемы с выравниванием или что с ними не так.

Заранее спасибо

1 Ответ

1 голос
/ 04 ноября 2019

Отзывчивый CSS должен быть в

@ media (min-width: 320px) {/ * смартфоны, портретный iPhone, портретные телефоны 480x320 (Android) * /}

@ media (min-width: 480px) {/ * смартфоны, телефоны Android, альбомная ориентация iPhone * /}

@ media (min-width: 600px) {/ * портретные планшеты, портретный iPad, электронная почтаустройства для чтения (Nook / Kindle), телефоны с поддержкой альбомной ориентации 800x480 (Android) * /}

@ media (min-width: 801px) {/ * планшет, планшетный iPad, ноутбуки с низким разрешением и настольные компьютеры * /}

@ media (min-width: 1025px) {/ * большие ландшафтные планшеты, ноутбуки и настольные компьютеры * /}

@ media (min-width: 1281px) {/ * ноутбуки высокого разрешения иdesktoptops * /}

Проблема в вашем отзывчивом CSS. Я надеюсь, что это поможет вам.

...