Advice on WDP and Android

[gcellison]

I’ve spent more than a year designing our new website in WDP 17. That seems like a long time, but it is for our business, and I had to fit it into my free time (which isn’t plentiful). More importantly, a lot of time was spent learning as much HTML and CSS as possible, and a little JS to boot, following in the footsteps of Acorn and several others here, so that I could gain greater control and make things more efficient.

Please visit the website at www.quintagyo.com.

Click the language icon for the English version. Any feedback is appreciated.

On to my issue. The website has three variants, desktop, tablet, and mobile. Pre-publication testing was done on computers of several sizes, 24” PC, 20” PC, and 13” laptop, all using Windows 10. I could find no way to test the website on Android devices before it went on-line, so I relied on how the site behaved when the browser window was reduced to the appropriate width to give me an indication.

After I uploaded the site to the server yesterday afternoon, I began testing in earnest. The site appears to function correctly in Vivaldi, Chrome, Edge, Firefox, Opera, and even Internet Explorer 11 on the Windows computers.

Then I turned to our smartphones and tablet. The 10” tablet and a 6.5” phone are Android 10; the other (5.75”) phone is Android 8. In principal, the visible material is supposed to maintain its size while adjustments to the width of the window simply change what is visible along the margins to the side. (I did not use Auto-fit Width.) It is precisely what happens in the Windows testing. But to my chagrin, the smartphones adjust the page size so that the entire width of the mobile variant fits in the screen making everything appear tiny. (That width is determined by the breakpoints calculated by the software. Of course, not all of that width can be utilized in the design since much of the content would be cut off in Windows-based devices narrower than the breakpoint.) The behavior would be expected only if I were using Auto-fit Width, but it occurs on the phones regardless.

On the tablet, things are also strange. In portrait mode, the tablet displays the mobile version (as expected, given the width). But in landscape mode, instead of displaying the tablet variant, it chooses the desktop variant and squeezes it into the limited space. Even when I zoom in, it maintains the largest variant rather than switching over to the tablet variant. That behavior is different from what is observed on a Windows PC.

All in all, the way the Android devices display the website is reminiscent of how the Auto-fit Width function in WDP. Yet, my design was not set up that way, and Windows devices do not display it that way.

So, my question is, has anyone else has encountered this problem or have a suggestion of how to fix it? Does WDP simply not attempt to accommodate differences in the behavior of Android devices? I’m wondering if I’m going to have to go back to the drawing board.

Any help is appreciated.