javascript - Any workaround on Instagram in-app browser cropping? - Stack Overflow

admin管理员组

文章数量:1356536

Instagram released (at some point this year) an update on their in-app browser (webview) that at least in iOS, breaks most sites.

The attached image is the website opened after clicking the "Learn more" on an Ad, but has the same behavior also on Profile Bio links.

The problem? It seems the top bar is an overlay on the website, making most navigations for mobile (hamburger icon on top left corner) unusable/unclickable and/or hidden.

The innerHeight is the same as screen.height. As answered at How to adjust html/css layout for instagram in-app browser? we can sniff the user agent of the webview.

Unsure if they will fix it at some point, but seems that any padding-top kind of solution would break if they do.

Instagram released (at some point this year) an update on their in-app browser (webview) that at least in iOS, breaks most sites.

The attached image is the website opened after clicking the "Learn more" on an Ad, but has the same behavior also on Profile Bio links.

The problem? It seems the top bar is an overlay on the website, making most navigations for mobile (hamburger icon on top left corner) unusable/unclickable and/or hidden.

The innerHeight is the same as screen.height. As answered at How to adjust html/css layout for instagram in-app browser? we can sniff the user agent of the webview.

Unsure if they will fix it at some point, but seems that any padding-top kind of solution would break if they do.

• javascript
• html
• ios
• css

Share Improve this question Follow asked Aug 15, 2017 at 17:09 tomasdevtomasdev 5,99611 gold badge3434 silver badges4040 bronze badges 5

• Hi Tom, did you find a fix for this by chance? I'm noticing the Instagram update 2 days ago is causing this exact issue on a few of our sites. Let me know! – nickff Commented Nov 2, 2017 at 16:39
• More specifically, what css did you write to resolve issue with your header getting cut-off? We have multiple fixed position elements having issues with their position / visibility in the instagram browser. Would love your thoughts! – nickff Commented Nov 3, 2017 at 2:39
• 1 @nickff I solved it using JavaScript, see my answer below. There's no CSS-only solution, as you'd have to sniff the user agent to detect their webview. – tomasdev Commented Nov 3, 2017 at 17:18
• Got it. Thanks, Tom! We're noticing this issue has resurfaced on many sites (not just our own). Guessing Instagram will release a fix, as it only seems to be occurring on iOS devices and not on Android. – nickff Commented Nov 3, 2017 at 20:19
• @nickff the fix I provided on the answers does take their future-fix into consideration, making it do nothing if they ever fix it. available height == screen height whenever they fix it will stop being the same. – tomasdev Commented Nov 8, 2017 at 21:46

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

I have found out an alternative that in theory should not break when they release a proper fix (given tons of ads are pointing to broken sites currently:)

if (window.innerHeight === window.screen.height && navigator.userAgent.match(/instagram/i)) {
  // here apply the fixes
}

本文标签： javascriptAny workaround on Instagram inapp browser croppingStack Overflow