Почему мой отзывчивый код выглядит иначе на iPhone по сравнению с окном для похудения? - PullRequest
Новая
       3

Почему мой отзывчивый код выглядит иначе на iPhone по сравнению с окном для похудения?

0 голосов
/ 09 апреля 2020

В настоящее время я занимаюсь разработкой небольшого шаблона в свободное время. Я делаю отзывчивую сторону вещей в настоящее время. Я владею iPhone X и использую его, чтобы проверить, насколько отзывчивы мои сайты.

Веб-сайт: https://donnieberry97.github.io/AgencyTemplate/

Репо: https://github.com/donnieberry97/AgencyTemplate/

Снимки экрана:

enter image description here

Как видите, я использую оба инструмента "Отзывчивость" на Chrome и iPhone X для сравнения. Я выбрал iPhone X на инструменте chrome, и сайт выглядит нормально.

Однако, как только я загружаю его в реальный iPhone X. Мой интервал на моих заголовках, кажется, исчез, и кнопка выходит за пределы div.

Есть ли что-то, что я здесь делаю не так? Я несколько раз пытался изменить размер окна, но все еще не могу воспроизвести то, что показывает мой телефон.

1 Ответ

0 голосов
/ 09 апреля 2020

В эмуляторе Chrome используются движки рендеринга и JavaScript, отличные от iOS Safari, поэтому не совсем надежно показать, как будет выглядеть ваш сайт на реальном устройстве.

Чтобы иметь возможность проверить ваш код на реальном iPhone, у вас есть несколько вариантов.

  1. Если у вас Ma c, скачайте Xcode из магазина приложений. В строке меню Xcode выберите Xcode> Открыть инструмент разработчика> Симулятор. И как только вы в симуляторе, вы можете просматривать свой сайт на различных iPhone. Чтобы проверить ваш код, откройте Safari. В «Предпочтения> Дополнительно», убедитесь, что вы отметили «Показать меню разработки в строке меню». Нажмите на «разработать» меню, и вы увидите ваше моделируемое устройство в списке. Выберите его, и веб-инспектор появится. Теперь вы можете проверять все свои элементы так же, как вы используете Chrome dev tools.

  2. Если у вас нет Ma c, Browserstack могу помочь вам

...