{% load ew_templatetags %}
{% load static %}

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <title>ExponWords - {% block title %}{% endblock %}</title>
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}?{% ew_version %}">
    <link rel="apple-touch-icon-precomposed" href="{% static 'images/touch-icon.png' %}?{% ew_version %}" />
    <link rel=stylesheet href="{% static 'css/exponwords.css' %}?{% ew_version %}" type="text/css">
{% block css %}
{% endblock %}
{% include_if_exists "ew/custom_head.html" %}
  </head>
  <body>
{% block content %}
{% endblock %}
  </body>
{% block javascript %}
{% endblock %}
</html>

{% load ew_templatetags %}
{% load static %}

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ExponWords - {% block title %}{% endblock %}</title>
    <link rel="shortcut icon" href="{% static 'images/favicon.ico' %}?{% ew_version %}">
    <link rel="apple-touch-icon-precomposed" href="{% static 'images/touch-icon.png' %}?{% ew_version %}" />
    <link rel=stylesheet href="{% static 'css/exponwords.css' %}?{% ew_version %}" type="text/css">
{% block css %}
{% endblock %}
{% include_if_exists "ew/custom_head.html" %}
  </head>
  <body>
{% block content %}
{% endblock %}
  </body>
{% block javascript %}
{% endblock %}
</html>

Improve scaling on mobile devices
Improve scaling on mobile devices

Previously, ExponWords worked well only with an older version of the
default Android browser (which showed the original text size after
double tapping on the text and also wrapped the text so that it would
fit the screen).

ExponWords didn't work well with other mobile browsers:

- In Firefox, the text was small.
- In Chrome, the text was sometimes small, and sometimes some parts of
  the text were large, because of the feature variously called font
  boosting, font inflation, text inflation and text autosizing.

This commit solves these problems by controlling the viewport. Thanks to
the "width=device-width, initial-scale=1.0" viewport setting, the mobile
browsers show the text with the original size, and they also wrap the
text according to the screen size. An additional benefit is that now no
double tapping is needed to achieve this usable layout.

[1] https://stackoverflow.com/questions/11289166/chrome-on-android-resizes-font
[2] https://bugs.webkit.org/show_bug.cgi?id=84186#c31
[3] https://jwir3.wordpress.com/2012/07/30/font-inflation-fennec-and-you/
