02 October, 2018
/* Declare browser-sync */

var browserSync = require('browser-sync');

/ * then add it to the gulp pipeline * /

gulp.task('browserSync', function() {
proxy: 'http://locahost'

/* run gulp task and should get the port and url for further cross browser tests
* or simply in cli use,

gulp browserSync

Problem: Prevent document reflow/browser resize when android keyboard opens

02 October, 2018
Let suppose you have a media query such as @media screen and (max-height: 470px) and (max-width: 900px)

While there is a resize on keyboard open, two options appear.
if you are using a framework on mobile development, such as Cordova, look for some framework built-in event,


window.addEventListener('native.showkeyboard', keyboardShowHandler);
window.addEventListener('native.hidekeyboard', keyboardHideHandler);

and implement a solution in keyboardShowHandler or keyboardHideHandler

or use some other event types, since we can define our events, it's up to the
framework to specify the EventTarget.dispatchEvent().

Else, for website browser usage,

Use a 'focusin'/'focusout' approach, depending on your need, or a 'resize' event, but since we are concerned about
the keyboard, we suppose the user is typing, and there is no other resize event as portrait/landscape transition.


Use focus events (js) to prevent the css resize rule to apply in this case.