[A11y] allow users to scale website

* on smaller screens, make fontsize bigger for inputs to not have iPhones zoom on focus
This commit is contained in:
Richard Schreiber
2025-04-23 14:36:28 +02:00
committed by GitHub
parent 48c2d57cd4
commit 9d01072880
4 changed files with 10 additions and 3 deletions

View File

@@ -4,7 +4,7 @@
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=false">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style type="text/css">
body {
background-color: #eee;

View File

@@ -18,7 +18,7 @@
{% include "pretixpresale/fragment_js.html" %}
<meta name="referrer" content="origin">
{{ html_head|safe }}
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1">
{% block custom_header %}{% endblock %}
{% if settings.favicon %}
<link rel="icon" href="{{ settings.favicon|thumb:'16x16^' }}">

View File

@@ -16,7 +16,7 @@
{{ seatingframe_html_head|safe }}
{% include "pretixpresale/fragment_js.html" %}
<meta name="referrer" content="origin">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body class="full-screen-seating" data-locale="{{ request.LANGUAGE_CODE }}">
<form method="post" data-asynctask

View File

@@ -59,6 +59,13 @@ html {
font-size: 1em;
}
@media (max-width: $screen-xs-max) {
/* scale everything to 1rem so older/smaller iPhones do not zoom inputs on focus */
.form-control {
font-size: 1rem;
}
}
/* fixe for bootstrap using px-values for fontsize */
.panel-title {
font-size: ($font-size-base * 1.125);