Android browsers not loading CSS properly

HTML & CSS
1

I have a website which all pages use the same stylesheet but about half the pages load text smaller than others on Androids (I tried Chrome on three different Android devices, and Chrome & Firefox on one of those 3, all do the same thing. The pages display the text the same size on the PC, and I used Firebug to inspect the CSS on the PC and can’t figure out why this is happening.

The URL format is m.davidandtenley.com/tables/3.html The page numbers which display the text small are 3, 5, 23, 29, 435, and 40496 and the ones that display the text properly are 9, 10, 11, 15, 16, 19, 62, 135, and 1980.

Anyone know what’s causing this, or know of a Firebug-like app for Android? I haven’t tried it on iOS.

2

Hi,

You don’t seem to be catering for mobile at all as far as I can see?

You have a desktop site that is too wide for mobile so the device will need to scale the pages smaller to fit on the device resulting in very small text depending on the width of the page.

You should be using the viewport meta tag and then utilise media queries to reformat the display so that it is suitable for mobile display; which will mean re-arranging the content into a suitable display for mobile (e.g. single column that fits in 320px width).

At present the device will just assume the page is 980px and scale the page until it fits on the device resulting in very small text. I’m guessing that you have some pages wider than others causing the text to be smaller on some pages. However, you really need to address the underlying issue if you want proper mobile support and not just a “default” shrink to fit.

Also you “must” optimise those images! The one I looked at was over 2mbyte when it should have been about 20k. That makes it over 100 times larger a filesize than you really need resulting in pages that take ages and ages to load on a desktop never mind a mobile device.:slight_smile:

3

Yes, I know I need to optimize the image sizes. I’m new to mobile development so I’m not familiar with the viewport meta tag but I’ll look into that.

4

I added

name="viewport" content="width=320px, initial-scale=1"

to the meta tag for one page (3.html) and

@viewport{
    zoom: 1.0;
    width: extend-to-zoom;
}

to the css for the site. The one page is now loading wider than the screen of my phone as expected with the zoom 1, however the text is still small so I don’t think that’s what’s causing this. I found some instructions on debugging mobile devices in Chrome on the PC so am hoping that will allow me to determine what’s causing this.

5

Hi,

The viewport meta tag you need is this one:


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

You don’t need to mess about with any other tags.

However on its own the viewport meta tag is useless as you then need to use media queries to tell the mobile device how to display your page. If you don’t use media queries to create a layout that fits in the smaller viewport then you either get text that sticks out or a layout that gets shrunk. The vieport meta tag an dthe media queries are both required to produce decent displays on mobiles. Otherwise you just leave it to chance and end up with the mismatched display that you are getting.

Read my replies in this recent thread where the OP is asking the same questions :slight_smile:

This is the basic stylesheet to get you started (taken from that post).


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Untitled Document</title>
<style>
.test {
	max-width:960px;
	margin:auto;
	background:red;
	min-height:100px;
	text-align:center;
}
.medium, .small { display:none }
@media screen and (max-width:760px) {
.test { background:blue }
.desktop { display:none }
.medium { display:block }
}
@media screen and (max-width:320px) {
.test { background:green }
.medium { display:none }
.small { display:block }
}
</style>
</head>

<body>
<div class="test">
		<div class="desktop">Desktop display</div>
		<div class="medium">760px and smaller</div>
		<div class="small">320px and smaller</div>
</div>
</body>
</html>

Do you have some screenshots of the different displays that you are seeing as it might give some extra clue? I still expect it to be that some pages are wider than others so the text has to be scaled smaller to fit the device. If you use media queries and the viewport meta tag you can make sure that the layout fits into a 320px window nicely and the text will stay at normal size (or you could even knock it up a couple of sizes for mobile if you are using text smaller than 13px).