0
266
ViewsMobile site looks different on an actual iPhone 12 VS chrome/firefox dev tools?
Hi I am building a weather app and I was using Firefox and Chrome inspect mobile views to check how they would look on mobile devices.
This is the link to my weather app: https://fervent-albattani-911414.netlify.app/?city=Beijing
On my Firefox developer tool, the iPhone 12 landscape of this app looks fine like this:
But when I go on my iPhone 12 and put it to landscape it looks like this:
https://drive.google.com/file/d/1x_PNSlMpdu6RZjybLzx2aSJyoNF2CTS_/view?usp=sharing
How do I fix this??
1 answers
Answer question0
The developer tool is an emulator not an actual representation.
But since emulators do not replicate the software or the hardware of the actual physical mobile devices, they have serious limitations, as Google acknowledges. Simply put, these limitations result in serious testing errors. Google even admits their emulator fails to accurately duplicate the behavior of the GPU and CPU in the mobile device hardware.
But here are two additional big deficiencies in the Chrome mobile emulator that Google doesn’t mention:
Chrome and Firefox mobile emulators uses a different rendering engine than either iOS or Android . This can be shown when emulating a web browser -the Chrome mobile emulator uses a different JavaScript engine from Safari as Chrome uses V8 while Safari runs JavaScriptCore/Nitro. These differences will have a large effect on your actual resolution.
Note: simulation is often best for apps and emulation for websites. (Cloud based simulators help reduce the negatives of using simulators.)
References to mobile1st