Add FORCE_PIXELS option to force pixels vs. display pixels
diff --git a/README.md b/README.md
index 510fa69..a246890 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,8 @@
- `SCROLL_TO_CONTENT` If this is set to `True`, when the content is below the sidebar (for example, on mobile), the page will be scrolled down to the content when it loads. An exception is made for the home page.
+- `FORCE_PIXELS` Some screens (mostly mobiles) don't use pixels directly and scale based on the concept of a "display pixel". Setting this to true tells the device to use actual pixels. Enable with care.
+
When developing locally, you may want to set the following variable: `SITEURL = http://localhost:8000`
## MODIFICATIONS
diff --git a/templates/base.html b/templates/base.html
index 0278677..10cce88 100644
--- a/templates/base.html
+++ b/templates/base.html
@@ -10,7 +10,7 @@
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">
<meta charset="utf-8" />
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
+ <meta name="viewport" id="viewport" content="width=device-width, initial-scale=1.0">
<meta name="author" content="{{ AUTHOR }}">
<meta name="description" content="Posts and writings by {{ AUTHOR }}">
@@ -102,5 +102,15 @@
}
</script>
{% endif %}
+
+ {% if FORCE_PIXELS %}
+ <script type="text/javascript">
+ var ratio = 1/window.devicePixelRatio;
+ var tag = document.getElementById("viewport")
+ if (ratio != 1 && tag != null){
+ tag.content = "width=device-width, initial-scale=" + ratio;
+ }
+ </script>
+ {% endif %}
</body>
</html>