Блог

Привет, я создаю приложение погоды, и я использовал 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

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

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

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

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

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

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

Ссылки на mobile1st