Add user scalable query parameter (#74)

webapp/titanembeds/blueprints/embed/embed.py

@@ -85,7 +85,8 @@ def guild_embed(guild_id):
             recaptcha_site_key=config["recaptcha-site-key"],
             css=customcss,
             cssvariables=parse_css_variable(customcss),
-            same_target=request.args.get("sametarget", False) == "true"
+            same_target=request.args.get("sametarget", False) == "true",
+            userscalable=request.args.get("userscalable", "True").lower().startswith("t")
         )
     abort(404)
 

webapp/titanembeds/constants.py

@@ -72,6 +72,22 @@ QUERY_PARAMETERS = [
         "description": "Prefills the guest username field with the given username.",
         "example": "Rainbow%20Dash",
     },
+    {
+        "name": "userscalable",
+        "type": "boolean",
+        "description": "Enables pinch-to-zoom and auto zoom on input fields for most mobile browsers on touch-enabled devices. Disabling this will give your embed a more app-like experience. Keep in mind that disabling this might prevent accessibility features disabled people rely on from functioning.",
+        "example": "false",
+        "options": [
+            {
+                "name": "true",
+                "default": True,
+            },
+            {
+                "name": "false",
+                "default": False,
+            },
+        ],
+    },
 ]
 
 LANGUAGES = [

webapp/titanembeds/templates/embed.html.j2

@@ -18,6 +18,11 @@
     <!--Let browser know website is optimized for mobile-->
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
     
+    {% if not userscalable %}
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
+    <meta name="HandheldFriendly" content="true" />
+    {% endif %}
+    
     {% include 'seo_meta.html.j2' %}
     
     <!--Provide default mobile metadata-->