#35321: Django Admin in Mobile Safari zooms in on text inputs
-------------------------------------+-------------------------------------
Reporter: Simon | Owner: nobody
Willison |
Type: | Status: new
Uncategorized |
Component: | Version: 5.0
contrib.admin | Keywords: css, accessibility,
Severity: Normal | mobile
Triage Stage: | Has patch: 0
Unreviewed |
Needs documentation: 0 | Needs tests: 0
Patch needs improvement: 0 | Easy pickings: 1
UI/UX: 1 |
-------------------------------------+-------------------------------------
The Django Admin on Mobile Safari currently has a bug where tapping on an
input field or textarea causes the screen to zoom in slightly, leaving the
user to zoom back out again when they have finished editing.
This is related to a fix from a while ago where we ensured our meta
viewport didn't restrict zooming - which was a good accessibility change!
https://code.djangoproject.com/ticket/34617
We can fix the zoom by very slightly increasing the font-size used for
these fields. 16px is the magic value that prevents Mobile Safari from
zooming in on a selected field.
I've applied this fix to my own site using a custom template here:
https://github.com/simonw/simonwillisonblog/blob/f5bf2f8fa035c62ef6b373d8237e9bc9e177052d/templates/admin/base_site.html
Here's a demo video I made on my iPhone:
https://static.simonwillison.net/static/2024/mobile-safari-zoom-django-
admin.mov
It shows two Django Admin instances. In the first half of the video I
interact with the default admin, showing how tapping on input text and
textarea fields zooms the screen in slightly.
In the second half of the video I interact with a customized version of
the Admin that sets font-size: 16px on those fields. This removes the
default zoom.
I think we should standardize on 16px for all form fields in the admin.
I've patched a bunch of them on my own instance, but the one thing I
haven't fixed yet is the select2 form field used for e.g. autocompleted
tag entry.
--
Ticket URL: <https://code.djangoproject.com/ticket/35321>
Django <https://code.djangoproject.com/>
The Web framework for perfectionists with deadlines.
--
You received this message because you are subscribed to the Google Groups
"Django updates" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/django-updates/0107018e5ec54e4c-1110a989-1987-4289-aa7d-6f405e491a3d-000000%40eu-central-1.amazonses.com.
