id	summary	reporter	owner	description	type	status	component	version	severity	resolution	keywords	cc	stage	has_patch	needs_docs	needs_tests	needs_better_patch	easy	ui_ux
35321	Django Admin in Mobile Safari zooms in on text inputs	Simon Willison	Jason Hall	"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."	Cleanup/optimization	closed	contrib.admin	5.0	Normal	fixed	css, accessibility, mobile	Thibaud Colas Sarah Abderemane Tom Carrick	Ready for checkin	1	0	0	0	1	1