Hola, estoy creando una aplicación meteorológica y estaba usando Firefox y Chrome para inspeccionar las vistas móviles para comprobar cómo se verían en los dispositivos móviles.
Este es el enlace a mi aplicación meteorológica: https://fervent-albattani-911414.netlify.app/?city=Beijing
En mi herramienta de desarrollo de Firefox, el paisaje de iPhone 12 de esta aplicación se ve bien así:
Pero cuando entro en mi iPhone 12 y lo pongo en horizontal, se ve así:
https://drive.google.com/file/d/1x_PNSlMpdu6RZjybLzx2aSJyoNF2CTS_/view?usp=sharing
¿¿Cómo puedo solucionar esto??
La herramienta de desarrollo es un emulador, no una representación real.
Pero dado que los emuladores no replican el software o el hardware de los dispositivos móviles físicos reales, tienen serias limitaciones, como reconoce Google. En pocas palabras, estas limitaciones dan como resultado graves errores de prueba. Google incluso admite que su emulador no logra duplicar con precisión el comportamiento de la GPU y la CPU en el hardware del dispositivo móvil.
Pero aquí hay dos grandes deficiencias adicionales en el emulador móvil de Chrome que Google no menciona:
Los emuladores móviles de Chrome y Firefox utilizan un motor de renderizado diferente al de iOS o Android. Esto se puede mostrar al emular un navegador web: el emulador móvil de Chrome usa un motor de JavaScript diferente de Safari, ya que Chrome usa V8 mientras que Safari ejecuta JavaScriptCore/Nitro. Estas diferencias tendrán un gran efecto en su resolución real.
Nota : la simulación suele ser mejor para aplicaciones y la emulación para sitios web. (Los simuladores basados en la nube ayudan a reducir los aspectos negativos del uso de simuladores).
Referencias a mobile1st