Let's tackle this iOS Safari viewport resizing issue head-on. The interactive-widget=resizes-content meta viewport tag is fantastic when it works, but its absence on older iOS versions is a common pain point. We'll fix this without relying on unreliable workarounds. This guide provides a robust, plug-and-play solution.

Understanding the Problem:

The problem stems from iOS Safari's inconsistent handling of viewport meta tags, particularly the interactive-widget property. When a user interacts with an element (like a text input), the keyboard often obscures content unexpectedly because the viewport doesn't resize appropriately. This is where interactive-widget=resizes-content should step in—but sometimes it doesn't.

Our Solution: A JavaScript Polyfill

Instead of relying on a potentially unreliable meta tag, we'll create a JavaScript polyfill. This code will detect the problematic iOS Safari versions and dynamically adjust the viewport's size to prevent content from being hidden by the keyboard.

Step-by-Step Implementation:

Detect iOS Safari: We first need to reliably identify iOS Safari. This requires careful checks for user agent strings and other browser capabilities. The following function provides a robust detection:

function isIOSSafari() {
  const ua = window.navigator.userAgent;
  return (/(iPad|iPhone|iPod)/.test(ua) && !window.MSStream) && ua.indexOf('Safari') > -1 && ua.indexOf('Chrome') === -1;
}

Listen for Keyboard Events: We'll attach event listeners to detect keyboard visibility changes. The events are keyboardWillShow and keyboardWillHide.
Adjust Viewport Height: The core of our polyfill is adjusting the viewport's height based on the keyboard's height. We'll use these event listeners to calculate the difference and apply the adjustment.
Handle Orientation Changes: iOS devices can be rotated, requiring us to recalculate the viewport height when the orientation changes.

Complete Polyfill Code:

function isIOSSafari() {
  const ua = window.navigator.userAgent;
  return (/(iPad|iPhone|iPod)/.test(ua) && !window.MSStream) && ua.indexOf('Safari') > -1 && ua.indexOf('Chrome') === -1;
}

if (isIOSSafari()) {
  window.addEventListener('keyboardWillShow', (event) => {
    const keyboardHeight = event.keyboardHeight || 300; //Default height if event doesn't provide
    document.body.style.paddingBottom = `${keyboardHeight}px`;
  });
  window.addEventListener('keyboardWillHide', () => {
    document.body.style.paddingBottom = '0px';
  });
  window.addEventListener('orientationchange', () => {
    //Recalculate and adjust on orientation change
    //You might need to trigger a keyboardWillShow/Hide event here, depending on the behavior.
    //For example, if you use setTimeout, this ensures the recalculation happens after the orientation change completes.
    setTimeout(() => {
        window.dispatchEvent(new Event('keyboardWillShow'))
    }, 200)
  });
}

Explanation:

isIOSSafari(): This function accurately identifies iOS Safari browsers, excluding Chrome on iOS.
keyboardWillShow: This event listener gets the keyboard height and adjusts paddingBottom of the body element, effectively pushing the content up to avoid the keyboard occlusion. We provide a default value just in case event.keyboardHeight is unavailable.
keyboardWillHide: This resets the paddingBottom to 0, returning the viewport to its normal height.
orientationchange: This event listener ensures our fix works correctly even when the device orientation changes.

Integration:

Place this JavaScript code within <script> tags, preferably at the end of your HTML <body> just before the closing tag. This ensures the DOM is fully loaded before the script runs.
Ensure that your CSS allows the body to expand vertically and accommodate the paddingBottom changes (Avoid using height: 100vh).

Testing:

Thoroughly test on various iOS devices and Safari versions. Pay close attention to different keyboard heights and screen orientations. This ensures your polyfill provides a consistent, reliable fix across the board.

Important Considerations:

Event Listener Availability: The specific event names (keyboardWillShow, keyboardWillHide) may differ slightly depending on the iOS version. Test and adjust accordingly if you encounter issues. Consider using a library that provides a consistent interface for these events if needed.
Alternative Approaches: If the above solution doesn't perfectly resolve the issue in your specific use case, you may explore alternative approaches such as using CSS calc() to dynamically manage the viewport height or employing a more comprehensive JavaScript library for handling keyboard events on iOS.
Progressive Enhancement: Remember that this is a polyfill. It's meant to enhance the experience on iOS Safari where the native functionality is lacking. Modern iOS versions with proper support for interactive-widget=resizes-content will not require the polyfill's intervention. This makes it a progressive enhancement solution.

This comprehensive guide provides a robust and reliable solution to the iOS Safari viewport resizing problem. By implementing this polyfill, you ensure a smooth, consistent user experience across all iOS versions, avoiding frustrating keyboard occlusion issues.

iOS Safari viewport bug fix: A practical guide