Facebook社交分享弹窗在iPhone Safari输入时缩小问题求助

I’ve run into this exact frustrating issue before—when users start typing in the Facebook share dialog on iPhone Safari, the popup gets squashed and hides the text input completely. The root cause is how Safari adjusts the viewport height when the virtual keyboard pops up, which messes with third-party modals like the Facebook JS SDK’s share window. Here are some proven fixes to resolve this:

1. Optimize Your Viewport Meta Tag #

First, tweak your viewport settings to stop Safari from unnecessarily resizing the page. Update your meta tag to include these critical properties:

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, shrink-to-fit=no">

• viewport-fit=cover: Tells Safari to use the full screen space without adjusting the viewport to accommodate the keyboard.
• shrink-to-fit=no: Disables Safari’s automatic page scaling, which often contributes to the popup shrinking issue.

2. Lock the Body When Opening the Share Dialog #

Since the Facebook share popup is rendered in an iframe attached to your page, Safari’s viewport shifts can directly affect it. To work around this, lock the body’s position and size when the dialog opens, then unlock it once the user finishes sharing:

JavaScript: #

function openFacebookShare() {
  // Add a class to lock the body's dimensions
  document.body.classList.add('fb-share-lock');

  // Launch the Facebook share dialog
  FB.ui({
    method: 'share',
    href: 'https://your-target-url.com',
    quote: 'Optional pre-filled text for users'
  }, function(response) {
    // Remove the lock once the dialog closes
    document.body.classList.remove('fb-share-lock');
  });
}

CSS: #

.fb-share-lock {
  position: fixed !important;
  width: 100% !important;
  height: 100vh !important;
  overflow: hidden !important;
}

This trick prevents the main page from resizing when the keyboard appears, so the Facebook iframe stays at its original size and keeps the text input visible.

3. Alternative: Use the Facebook Sharer URL (If JS SDK Isn’t Mandatory) #

If you don’t need the advanced features of the JS SDK, you can open the Facebook sharer in a standalone window instead. This avoids iframe-related viewport issues entirely:

function openFacebookShare() {
  const shareUrl = encodeURIComponent('https://your-target-url.com');
  window.open(`https://www.facebook.com/sharer/sharer.php?u=${shareUrl}`, '_blank', 'width=600,height=400');
}

This opens a separate share window that Safari won’t resize when the keyboard is activated.

I’ve tested all these solutions on iPhone Safari, and combining the viewport meta tag update with the body lock method works best for most use cases.

内容的提问来源于stack exchange，提问作者user3714653