Legible on mobile?

HTML & CSS
1

Hi - I’ve just discovered that my site doesn’t have “responsive design.” I viewed it in safari on iphone and the text is tiny. Is there a meta command I can use to tell it to display a bigger font size on mobile devices? So instead of displaying the page as is, it displays scrolling text, so user does not have to use horizontal scroll to read bigger font?

The meta I have now is:
<meta http-equiv=“content-type” content=“text/html; charset=utf-8” />

The site is http://www.greensmoothie.com/

Another site - http://drivingtraffic.com/ - claims they have responsive design although I wasn’t too impressed because their subscribe button at the top right drops into the middle of the page on an iphone. But their text is bigger than mine on an iphone!

thank you, Val

2

Hi Val. One thing you could do for devices like the iPhone is add this to your style sheet:

@media only screen
and (min-width : 320px)
and (max-width : 480px) {
	body {font-size: 150%;}
}

It may have other, unforeseen effects, but they can be dealt with. Give that a go and see what you find. :slight_smile:

3

Oh dear I tried that but it has no effect on either desktop (good!) or iphone. I really hope I find a simple solution to this!

4

The problem is that your font sizes are declared in pixels, eg font-size:12px; instead of using % or EM. If you replace with % your text will be scalable.

5

Hey Val,

Here’s where I think the problem lie. Give it a try and let me know if it helps.

If your iPhone is iPhone 4 or newer, you’ll run into some problems with the using just media queries to change text sizes. This is because iPhone 4 and above have a “higher resolution” screen. Meaning to say 1px on the desktop doesnt equate to 1px on the phone. The actual iPhone 4 dimensions would be 640 x 960 instead of the usual 320 x 480 in the iphone 3.

There’s one way to fix this though, and that is to set the viewport initial scale to 1.

Here’s the code you have to place in the head of your HTML file.

<meta name=“viewport” content=“width=device-width, initial-scale=1.0”/>

If it doesn’t work with this alone, try it together with ralph’s suggestion and see how it goes.

Hope this helps!

Zell.

6

Thank you! I’ll play with this. I discovered there’s a reader button in the browser bar of the iphone 4. When I click that, the page is displayed as scrolling text within the iphone window (like an sms msg) - and user can choose text size (it’s pretty big by default). Which is exactly what I need. Then I can go back to page view and in the menu section just zoom in with my fingers so that the links are big and easy to navigate.

I’m guessing android also has this “reader” function. So “responsive design” doesn’t seem needed when it’s already built into the phone technology.

On iphone that reader button is only displayed on my css pages. On my old tables pages - e.g. http://www.greensmoothie.com/eat/healing.php - I have to zoom in and horizontally scroll so at some point in nevernever land and nevernevertime, gonna have to upgrade the entire site to css…

7

I use an iPhone and I have no idea wheres the reader function! Learnt something new today :slight_smile:

Then again, most people don’t know about the reader function, so try your best to style it nicely on first glance if possible. You only have a chance to make the first impression!

Do note that viewlikeus wont work like it should if you’re using the meta tag I gave you.

This can be a good alternative instead:

8

thank you! Yes the reader button is right there in the browser windowbar…