Welcome to WebmasterWorld Guest from 18.208.159.25

Forum Moderators: not2easy

Message Too Old, No Replies

What to do the emulator fails

     
7:50 pm on Nov 27, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2721
votes: 824


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?
9:31 pm on Nov 27, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lucy24 is a WebmasterWorld Top Contributor of All Time 5+ Year Member Top Contributors Of The Month

joined:Apr 9, 2011
posts:15900
votes: 876


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.
9:32 pm on Nov 27, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2721
votes: 824


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.
9:45 pm on Nov 27, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts: 2721
votes: 824


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?
9:45 am on Nov 28, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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.
2:34 am on Nov 30, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2721
votes: 824


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.
3:15 am on Nov 30, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2721
votes: 824


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?
3:29 am on Nov 30, 2017 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


Is it possible that it was an ad, that was breaking things?
Should not if you're using "responsive" ads.
3:32 am on Nov 30, 2017 (gmt 0)

Senior Member

WebmasterWorld Senior Member Top Contributors Of The Month

joined:Apr 1, 2016
posts:2721
votes: 824


AMP-responsive. I guess I gotta take another trip to the mall to debug my layout!
1:49 pm on May 30, 2018 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month

joined:May 29, 2003
posts:905
votes: 63


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).
8:38 pm on May 31, 2018 (gmt 0)

Full Member

joined:May 21, 2018
posts:276
votes: 72


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 .
4:44 am on June 2, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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.
7:02 am on June 2, 2018 (gmt 0)

Moderator from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
posts:12390
votes: 409


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?

7:34 am on June 2, 2018 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member keyplyr is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Sept 26, 2001
posts:12913
votes: 893


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...]
8:37 am on June 2, 2018 (gmt 0)

Moderator from US 

WebmasterWorld Administrator robert_charlton is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Nov 11, 2000
posts:12390
votes: 409


keyplyr, thanks.