2017-08-15 52 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 
} 
相關問題