2017-08-15 47 views
9

Instagram(今年某个时候)发布了一款关于他们的应用内浏览器(webview)的更新,至少在iOS中,该浏览器打破了大多数网站。任何在Instagram应用内浏览器裁剪方面的解决方法?

附加图片是点击广告“了解详情”后打开的网站,但在个人资料简介链接上也具有相同的行为。

问题?看起来顶栏是网站上的叠加层,使大多数移动导航(左上角的汉堡图标)不可用/不可点击和/或隐藏。

innerHeightscreen.height相同。如在How to adjust html/css layout for instagram in-app browser?回答,我们可以嗅探webview的用户代理。

SXSW website via Instagram Ads click

不确定他们是否会解决它在某些时候,但目前看来,如果他们做任何填充顶样的解决方案将打破。

+0

你好Tom,你有没有找到一个固定的替代这是偶然的?我注意到2天前的Instagram更新导致了我们几个网站上的这个确切问题。让我知道! – nickff

+0

更具体地说,你写了什么css来解决你的头部被截断的问题?我们有多个固定位置元素,它们在instagram浏览器中的位置/可见性方面存在问题。会爱你的想法! – nickff

+1

@nickff我使用JavaScript解决了它,请参阅下面的答案。没有纯CSS的解决方案,因为您必须嗅探用户代理才能检测其webview。 –

回答

3

我发现,在理论上,当他们释放不应该打破一个适当的定位点(给定万吨的广告所指向的网站打破目前:)

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