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

QingJ © 2025

镜像随时可能失效,请加Q群300939539或关注我们的公众号极客氢云获取最新地址