page.tmpl: tell mobile browsers we have a responsive layout, unless told not to

Mobile browsers typically assume that arbitrary web pages are
designed for a "desktop-sized" browser window (around 1000px)
and display that layout, zoomed out, in order to avoid breaking
naive designs that assume nobody will ever look at a website on
a phone or something. People who are actually doing "responsive
design" need to opt-in to mobile browsers rendering it at a
more normal size.

diff --git a/IkiWiki.pm b/IkiWiki.pm
index dfe89ad32a30adf6b681d77bea12dc7e7e64539b..03f058ef7fdeaf708fe2ef0540b433e4d174a907 100644 (file)
--- a/IkiWiki.pm
+++ b/IkiWiki.pm
@@ -549,6 +549,13 @@ sub getsetup () {
                safe => 0,
                rebuild => 0,
        },
+       responsive_layout => {
+               type => "boolean",
+               default => 1,
+               description => "theme has a responsive layout? (mobile-optimized)",
+               safe => 1,
+               rebuild => 1,
+       },
 }
 
 sub defaultconfig () {

diff --git a/IkiWiki/Render.pm b/IkiWiki/Render.pm
index 9d6f636a25c372019eb56075029e820e3d3113a5..c1a3dcbf272a468cd0df682d7fa2983877984510 100644 (file)
--- a/IkiWiki/Render.pm
+++ b/IkiWiki/Render.pm
@@ -134,6 +134,7 @@ sub genpage ($$) {
                ctime => displaytime($pagectime{$page}, undef, 1),
                baseurl => baseurl($page),
                html5 => $config{html5},
+               responsive_layout => $config{responsive_layout},
        );
 
        run_hooks(pagetemplate => sub {

diff --git a/templates/page.tmpl b/templates/page.tmpl
index 301c737fe4d30e15c9e2d1b6863bb660bb0fb03f..9e8b330a4a25124eb799b52ad9b840b0c6105fd6 100644 (file)
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -8,6 +8,7 @@
 </TMPL_IF>
 <TMPL_IF HTML5><meta charset="utf-8" /><TMPL_ELSE><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /></TMPL_IF>
 <title><TMPL_VAR TITLE></title>
+<TMPL_IF RESPONSIVE_LAYOUT><meta name="viewport" content="width=device-width, initial-scale=1" /></TMPL_IF>
 <TMPL_IF FAVICON>
 <link rel="icon" href="<TMPL_VAR BASEURL><TMPL_VAR FAVICON>" type="image/x-icon" />
 </TMPL_IF>