☰

Enhanced Safari Input Zoom Prevention

Prevents iOS Safari zoom on inputs while maintaining accessibility

  1. // ==UserScript==
  2. // @name         Enhanced Safari Input Zoom Prevention
  3. // @namespace    http://tampermonkey.net/
  4. // @version      0.2
  5. // @description  Prevents iOS Safari zoom on inputs while maintaining accessibility
  6. // @author       sharmanhall
  7. // @match        *://*/*
  8. // @grant        none
  9. // @license MIT
  10. // ==/UserScript==
  11.  
  12. (function() { 
  13.     'use strict';
  14.     
  15.     // Create and append meta viewport tag if it doesn't exist
  16.     function setupViewport() {
  17.         let viewport = document.querySelector('meta[name="viewport"]');
  18.         if (!viewport) {
  19.             viewport = document.createElement('meta');
  20.             viewport.name = 'viewport';
  21.             document.head.appendChild(viewport);
  22.         }
  23.         viewport.content = 'width=device-width, initial-scale=1, maximum-scale=1';
  24.     }
  25.  
  26.     // Apply styles that prevent zoom while maintaining readability
  27.     function applyNoZoomStyles() {
  28.         const style = document.createElement('style');
  29.         style.innerHTML = `
  30.             /* Target all form elements */
  31.             input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  32.             textarea,
  33.             select {
  34.                 font-size: 16px !important; /* iOS minimum font size to prevent zoom */
  35.                 max-height: none !important;
  36.                 -webkit-text-size-adjust: 100%;
  37.                 transform-origin: top left;
  38.                 transform: scale(1);
  39.             }
  40.  
  41.             /* Ensure proper sizing for smaller screens */
  42.             @media screen and (max-width: 768px) {
  43.                 input:not([type="button"]):not([type="submit"]):not([type="reset"]),
  44.                 textarea,
  45.                 select {
  46.                     font-size: 16px !important;
  47.                     line-height: normal !important;
  48.                     padding: 0.5em !important;
  49.                 }
  50.             }
  51.  
  52.             /* Maintain proper height for select elements */
  53.             select {
  54.                 height: auto !important;
  55.                 padding: 0.5em !important;
  56.             }
  57.         `;
  58.         document.head.appendChild(style);
  59.     }
  60.  
  61.     // Handle dynamically added elements
  62.     function observeNewElements() {
  63.         const observer = new MutationObserver((mutations) => {
  64.             mutations.forEach((mutation) => {
  65.                 mutation.addedNodes.forEach((node) => {
  66.                     if (node.nodeType === 1 && // Element node
  67.                         (node.tagName === 'INPUT' || 
  68.                          node.tagName === 'TEXTAREA' || 
  69.                          node.tagName === 'SELECT')) {
  70.                         node.style.fontSize = '16px';
  71.                     }
  72.                 });
  73.             });
  74.         });
  75.  
  76.         observer.observe(document.body, {
  77.             childList: true,
  78.             subtree: true
  79.         });
  80.     }
  81.  
  82.     // Initialize all functions
  83.     function init() {
  84.         setupViewport();
  85.         applyNoZoomStyles();
  86.         observeNewElements();
  87.     }
  88.  
  89.     // Run on DOMContentLoaded or immediately if already loaded
  90.     if (document.readyState === 'loading') {
  91.         document.addEventListener('DOMContentLoaded', init);
  92.     } else {
  93.         init();
  94.     }
  95. })();