What to do the emulator fails

[NickMNS]

I happened to take a trip to the mall this morning. So I stopped into various phone vendors to try out my website on various devices. I discovered that my responsive design is broken on the Samsung Galaxy S8. But I built it using the Chrome Dev-Tools emulator, Opera Dev-Tools Emulator (same as Chrome) and Firefox emulator.Then tested it on Ipad, and Samsung Galaxy J3, and everything looked and worked fine across all those platform and appeared as per the various emulators.

The only sign that something might be amiss was when I did GSC fetch as Google the rendered view appeared broken. It turns out that Fetch as Google returns the same view as the Samsung S8.

My question now is, how can I debug my page when all the tools I use don't reproduce the bug? Do I need to drop a grand on a new device?

[lucy24]

I strongly suspect the real explanation is that the device is being too smart for its own good: “The page said X but obviously he meant Y, well I mean, duh, obviously that’s what he meant”.

:: insert random piece of editorializing about Google here ::

So we're right back to device-detection, which responsive design was supposed to render unneccessary?

I'd like to know more about what specific things were wrong. I'm assuming you've got both bits of boilerplate in every page's header: the "device-width" bit and the "initial-scale" bit.

[NickMNS]

Just to add. I also tested on the Samsung Galaxy S6, and it worked fine. So this seems to be a specific issue with the s8.

[NickMNS]

I'd like to know more about what specific things were wrong. I'm assuming you've got both bits of boilerplate in every page's header: the "device-width" bit and the "initial-scale" bit.

Yes all the boiler plate stuff is there. Maybe I should add that the page is an AMP page. Which should, in theory, not cause an issue. I accessed the page directly and not through the Google AMP cache.

More specifics about what is broken. It is kind of hard to tell really as I didn't have much time to go through the page in great detail while standing in a shop. The page is built with flex-box, and it seemed as though the flex-boxes where not behaving. Many of the elements on the page were overlapping. One other noticeable issue was that the screen width was off suggesting an that is could possibly have been caused by a single element that wasn't sizing correctly.

But really the question is, are there any tools that can be used to emulate specific phones? Or some other trick to reproduce the issue so it can be debugged?

[keyplyr]

Fetch as Google returns the same view as the Samsung S8

Yes, somewhere we've discussed that in the past.

Maybe I should add that the page is an AMP page.

That may turn out to be helpful in researching a fix or workaround.

...are there any tools that can be used to emulate specific phones?

Not as efficiently as needed IMO. I've not found any that accurately match what's displayed on phones.

You may want to research various alternatives of mobile detection scripts. Some may do a better job sniffing the S8 as related to AMP.

[NickMNS]

Just to update.

I have installed an instance of Android 7 "Nougat" on my desktop using VirtualBox. Unfortunately the screen resolution is set to tablet size, so I am trying to figure out how to resize it. But so far I am unable to reproduce the bug. (I guess that is a good thing?)

The great thing about doing this is that one can test out the app features of the PWA, such as the splash screen, and the desktop shortcut and full screen mode. Its pretty cool.

[NickMNS]

I managed to resize it. Tried a few different sizes, but the exact S8 resolution (360x640) is not one of them. But still I tried, 320x200 and 640x480 and neither broke the layout. So I am stumped.
Is it possible that it was an ad, that was breaking things?

[keyplyr]

Is it possible that it was an ad, that was breaking things?

Should not if you're using "responsive" ads.

[NickMNS]

AMP-responsive. I guess I gotta take another trip to the mall to debug my layout!

[Sally Stitts]

Is it possible that it was an ad, that was breaking things?

Should not if you're using "responsive" ads.

WRONG! I spent 1/2 the day yesterday trying to get the responsive ad on my TOP page to work correctly.
AdSense is TOO aggressive with "filling the container".
I tried several container changes. MY width is 450 pixels, but Google was jamming an ad in that was about 480 pixels.

Which resulting in my page failing all the mobile emulators, for failing to observe the "viewport" parameter.
Also, the ad text is overwritten on the right, because there is NOT enough room.
It works on desktop just fine (except for the overwriting), but on mobile, it widens the container (in this case, table width).

[QuaterPan]

WRONG! I spent 1/2 the day yesterday trying to get the responsive ad on my TOP page to work correctly.

Had the same problem earlier this month. Now, I no longer trust responsive ad , and handling the responsive design myself .

[keyplyr]

WRONG! I spent 1/2 the day yesterday trying to get the responsive ad on my TOP page to work correctly.
AdSense is TOO aggressive with "filling the container".
I tried several container changes. MY width is 450 pixels, but Google was jamming an ad in that was about 480 pixels.

This was discussed in the other thread and a link with example was given.

Your container needs to be responsive and not fixed. It needs to allow for the variance of ad size.

[Robert Charlton]

Yes, somewhere we've discussed that in the past.

This was discussed in the other thread and a link with example was given.

If we can invent time travel, we've got it made. ;)

Anyone have any suggestions about finding that other thread?

[keyplyr]

This was discussed in the other thread and a link with example was given.

If we can invent time travel, we've got it made. ;)

[webmasterworld.com...]

[Robert Charlton]

keyplyr, thanks.