0

I have had a simple HTML website up for a very long time, but since the rise of modern mobile devices (e.g. iOS, Android), the text rendered is painfully small and with very annoying fixed wide margins.

This is the basic structure of every page:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title></title>
</head>
<body>
<p></p>
</body>
</html>

Is there an HTML or CSS solution I can use to make reading more friendly, such as allowing margins to shift on zoom or increasing the font size?

Improve this question
1
  • @JohnConde I appreciate that the question is broad, but frankly, searching for a solution produces results of nearly all noise, mostly filled with SEO issues, CMS specific solutions, or JavaScript-based solutions. This makes it hard to even figure out where the starting point to a solution for my site might be. – Paul Oct 13 '16 at 19:10
1

This is easy. Add this in your <head>

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

This tells browsers to scale the page to something other than their default view.

For more information, Google for "viewport" as their are other settings but what I show is most likely all you should use.

However, there is more to coding for mobile than just that. You'll want to look into "media queries" and "mobile first" programming.

Improve this answer
2
  • Thanks. Should that end with />? – Paul Oct 13 '16 at 17:35
  • 1
    @Paul No. And neither should your <meta> tags. The specification has never called for that in HTML. Though it's not invalid, it means nothing, it does nothing and the spec tells browsers to ignore it, making it useless. – Rob Oct 13 '16 at 17:39

Not the answer you're looking for? Browse other questions tagged or ask your own question.