Мобильный сайт выглядит иначе на реальном iPhone 12 по сравнению с инструментами разработчика chrome / firefox?

#javascript #html #css #reactjs

#javascript #HTML #css #reactjs

Вопрос:

Привет, я создаю приложение погоды, и я использовал Firefox и Chrome для проверки мобильных представлений, чтобы проверить, как они будут выглядеть на мобильных устройствах.

Это ссылка на мое приложение погоды: https://fervent-albattani-911414.netlify.app/?city=Beijing

В моем инструменте разработчика Firefox ландшафт этого приложения для iPhone 12 выглядит примерно так: введите описание изображения здесь

Но когда я захожу на свой iPhone 12 и перевожу его в альбомную ориентацию, это выглядит так:

https://drive.google.com/file/d/1x_PNSlMpdu6RZjybLzx2aSJyoNF2CTS_/view?usp=sharing

Как мне это исправить??

Ответ №1:

Инструмент разработчика — это эмулятор, а не фактическое представление.

Но поскольку эмуляторы не копируют программное или аппаратное обеспечение реальных физических мобильных устройств, у них есть серьезные ограничения, как признает Google. Проще говоря, эти ограничения приводят к серьезным ошибкам тестирования. Google даже признает, что их эмулятор не может точно воспроизвести поведение графического процессора и процессора в аппаратном обеспечении мобильного устройства.

Но вот два дополнительных больших недостатка в эмуляторе Chrome mobile, о которых Google не упоминает:

В эмуляторах Chrome и Firefox mobile используется другой механизм рендеринга, чем в iOS или Android. Это может быть показано при эмуляции веб-браузера — эмулятор Chrome mobile использует движок JavaScript, отличный от Safari, поскольку Chrome использует V8, а Safari запускает JavaScriptCore / Nitro. Эти различия будут иметь большое влияние на ваше фактическое разрешение.

Примечание: имитация часто лучше всего подходит для приложений и эмуляции для веб-сайтов. (Облачные симуляторы помогают уменьшить негативные последствия использования симуляторов.)

Ссылки на mobile1st

Комментарии:

1. итак, есть ли рекомендация о том, где лучше всего протестировать мои сайты в мобильном режиме?

2. Попробуйте бесплатную пробную версию browser-stack live. — это эмулятор, но он почти на 100% эффективен как для Android, так и для IOS

3. Я бы добавил, что эмуляторы могут не отражать фактические результаты, которые будут отображаться на физическом устройстве, поскольку они имеют некоторые ограничения.