Search code examples
cssmobilemicrosoft-edgeuc-browser

Webpage is super wide in mobile browser windows

I've created the following web page:

http://isometricland.net/games/games.php

The problem is that on my Lumia, in UC Browser as well as Edge, the text is tiny. (Everything is rendered tiny, in fact. I have to zoom in in order to read anything.)

Is this a problem with my CSS code? Or, are the mobile browsers falsely reporting the device's screen dimensions? I wrote some media queries to render slightly different styles based on the size of the screen in em units, but the lowest sizes are not being detected.

I would like to fix this if the problem is with the web page, but I have no idea how to tell if it is the web page's fault, or what the problem is.

Please help!

Solution

  • Try adding the following to your <head>:

    <meta name="viewport" content="width=device-width, initial-scale=1">

    For further information, see Using the viewport meta tag to control layout on mobile browsers.

    The next problem you're going to face is your use of tables. These will cause the page layout to be much wider, since they don't wrap. What you could do is place these within a responsive wrapper that will scroll any additional overflow:

    <div class="scroll-overflow">
    <table>...</table>
</div>

    div.scroll-overflow {
    overflow-x: scroll;
}

    Lastly, you're loading a full 728x90 advertisement at the bottom of your site. This too is going to cause the overall layout to be very wide, and thus display as much smaller on your screen.

    You should either place a much narrower ad here, or restrict the ad-width with CSS. And with these small changes, your site immediately becomes many times more friendly to mobile users.

    Here's a before (left), and after (right).

    enter image description here