Mobile-friendly static HTML

January 14, 2016 — BarryK

My web pages are all "old school" HTML. I have dabbled in CSS and Javascript, but mostly create web pages with simple static HTML using tables.

My web pages look fine on a desktop screen, but not so good on a mobile phone. Typically, I create a centered table with a fixed width, and all content goes inside that. Basic structure:

<html>
<head ... > ... </head>
<table align="center" width="700" ... > ... </table>
</html>

On a high resolution mobile phone screen, the table renders very small, with large blank space both sides.

However, I discovered a very simple fix. Just insert this line into the <head> section:

<meta name="viewport" content="width=700">

Remarkable, on my Android phone, my pages scale, both in portrait and landscape orientation, so that the table width fills the screen. Everything, text and images, scale correctly.

See my example page:
http://barryk.org/light/solar/index.html

References:
http://developer.android.com/guide/webapps/targeting.html
https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html

...though, I haven't even read most of that. Just took a punt on the "width" parameter, and it worked.

Tags: light