1

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!

posfan12
  • 2,541
  • 8
  • 35
  • 57

1 Answers1

3

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

Sampson
  • 265,109
  • 74
  • 539
  • 565
  • Okay, I followed some of what you said, but set "initial-scale=0.5", and I *think* I'm happy with it. At least on my device. But how do I tell I am at the default zoom level of the browser? I can zoom in and out by pinching the screen, but how to reset the zoom to the default? Also, the double tap seems to affect the zoom level. But how? I know this is a bit off topic but it is confusing me and is getting in the way. Thanks. – posfan12 Aug 24 '16 at 03:44
  • Erm.. Maybe I am still confused. Do desktop browsers also pay attention to the meta viewport tag? I just set it to 600px and Chrome on my dekstop seems to ignore it. (And I figured out what double tapping does, so ignore that.) – posfan12 Aug 24 '16 at 04:19
  • Making things harder, I can't figure out how to reset the browser zoom to its default level. (In both MS Edge and UC Browser.) – posfan12 Aug 24 '16 at 05:33
  • @posfan12 Double-tapping an element will attempt to zoom to that element. Pinching out will restore the viewport to its initial zoom (press Ctrl+0 on desktops to do the same); I'd encourage you to leave the `initial-scale=1` for legibility. Desktop browsers won't use this `meta` tag for their layout. You can use *Media Queries* to control the layout better across mobile devices, desktop devices, and everything in between. – Sampson Aug 24 '16 at 18:13
  • Setting the viewport width to 600px is satisfactory to me. It is legible if you squint, even on my low resolution Lumia. I removed the initial-scale value however, and UC Browser at least auto-zooms to fit the page in the window. (I am still having problems with Microsoft Edge.) I did decrease the advertisement's size like you suggested. – posfan12 Aug 25 '16 at 02:27
  • @posfan12 Remember, while 600px may looks good on your device, this same meta element will govern layout for others users, on other devices. It's generally best to leave `width=device-width`. I would also encourage you to begin exploring [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries). – Sampson Aug 26 '16 at 20:18