Non-Responsive Site Having Display Issues on Mobile Devices

Howdy!

I am hoping one of the talented people at WPMU DEV can help me with yet another question.

The site in question seems to be having mobile display issues on Android and iOS devices with the stock browser and with the latest Firefox browser (Safari for iOS has issues). Chrome on Android works fine.

It seems to be related to a viewport issue. But I am not sure as I don't fully understand that Meta tag. What is happening is the page is loading on the browsers in question zoomed way in versus loading with the entire page showing. The screen shot below pretty much sums it up.

I don't really need the viewport since we are not designing a mobile page. I do need for people to be able to zoom in so that they can read the information on our site. The active breakpoints for mobile and tablet were disabled in Upfront. I just need the page to be zoomed to 100% when loaded. Again, I don't have the problem in mobile Chrome.

And on iOS devices Firefox actually works and Safari does not display correctly. They load just fine.

Both Firefox browsers are completely up to date.

Can you offer me some guidance and is there something I am missing in Upfront that is causing this to happen? Is it not the viewport meta? Is is something else?

Thanks in advance for any and all help.

Peace,
-Albert

  • Rupok

    Hi Albert

    Hope you had a wonderful day.

    Just to make sure we are checking the same thing, can you please confirm which site we are talking about? Because I found "weareonebodyradio.org" registered for your account but that page is loading fully zoomed-out in Firefox and Safari in my iOS but you said Safari for iOS has issues. Please check the attached screenshot for reference.

    I shall investigate further as soon as I hear back from you.

    Have a nice day. Cheers!
    Rupok

  • Albert

    Howdy Rupok!

    Thanks for getting back to me.

    Yes, the website in question is http://www.weareonebodyradio.org

    Well, as is the case with most of these issues, I now cannot replicate the issue on the iOS device anymore. It appears to be fine on Safari and Firefox.

    However, the issue is persistent on the Android device with the built in browser and the latest Firefox.

    Thoughts?

    Thanks Rupok!

    Peace,
    -Albert

  • Albert

    Rupok,

    Good evening (well at least it is here, not sure where you are).

    So, I was digging and digging and came back to the viewport coding in the header.php for Upfront.

    I commented out the original line for the viewport and inserted the following:

    <meta name="viewport" content="width=1080">

    That seems to have corrected the problem that we were having. Of course it does not explain what the root of the problem is since certain browsers and certain devices are not having the display issue. And of course the majority of people most likely need a viewport to respond to mobile devices much differently than we do.

    So if you find an actual solution that would be great. Because I assume that having the header.php file modified risks it being overwritten with any updates. So keep me posted please.

    Thanks!

    Peace,
    -Albert

  • Rupok

    Hi Albert

    Hope you had a wonderful day.

    Bulls eye! Congratz! That's was the actual reason. Let me describe:
    The viewport is the user's visible area of a web page. The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen. Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size. Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen. This was not perfect!! But a quick fix.

    So with the previous viewport meta tag which was there in your site, it was making the site width 1080 pixels regardless of devices. So fit-to-screen was not working. And it's obvious that removing this is best solution for your issue.

    Is there anything else we can help you with? We will be glad to help.

    Have a nice day. Cheers!
    Rupok

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.