Difference between Browser Tools and what actually shows on phones?

Beginners
1

I’m confused as to why the owneer says www.turnerpackaging.com works on phones.
Is there a difference between Browser Tools and what actually shows on phones?

iphone
iphone1166×832 238 KB

2

Hi @kat,
Sometimes simply turning on the device emulation in the Dev Tools isn’t enough. You have to reload the page with the emulation turned on to see what it would really look like. It depends on how the responsive design is put together.
Cheers,
Bob

1 Like
3

And very often, emulation through the browser tools is not enough to have a 100% true rendering and there are more advanced solutions such as https://www.browserstack.com (this is only an example).

1 Like
4

I too think this site is quite a tough cookie.
Built in WIX. TONS of scripting.
Looks great on a phone. It does preview in Dev Tools, but like RobM suggested it needs to reload once you are there.
Pinegrow can’t seem to make much sense of it when you load the remote URL. Microsoft Edge and Safari both have trouble displaying the page on the desktop, as the page does not resize to fit the window.

I would be curious to have some of the smart people here explain this site and its behavior as it is well past my understanding!

1 Like
5

Hey @SteveH,
I didn’t dig far into it because there is a LOT going on, but basically, it looks like they don’t use media queries. Instead they detect the incoming device and add a class to the body. This script doesn’t recognize a change in device from the Dev Tools without reloading the site. I don’t think it handles device re-orientation very well - or at least it isn’t designed for landscape.
Bob

7

Thanks! for spending some brain-time on this.

Sorry for the delay in getting back to you. Just got busy on other work and hadn’t been here for a bit… but I totally appreciate all the smart people here willing to share a bit of their wisdom!