all articles

safari triggers no resize when addressbar is called out

2015-07-05 @sunderls

iOS iphone6plus landscape tabs js

desc

on landscape mode, tapping on the upper border will call out address bar

conditionevent fired
iphone6(iOS8), iphone6plus
(iOS8, single page)
resize
iphone6plus
(iOS8, mutiple page with tabs)
scroll
iOS7( no event)

iphone6plus will show browser tabs, which are very alike to the pc browsers, and they seems to overlap with page, and thus triggers no event:resize,

how do we know that available area of safari has changed?

workaround

debouncing event listener

  1. on iOS7 listen to 'touchend' event
  2. on iOS8 listen to 'resize scroll'

code

    if (isIOS){
        $(window).on('scroll.fix touchend.fix', $.debounce(function(){
            var height = window.innerHeight;
            if (height != prevHeight){
                // do something here, since browser available size has changed
            }
        }));
    }