You have need dynamic responsive for your app, css cant full coverage, now you can use a handler of viewport device, easy usage.
you should local install with your handler dependencies fovorite
install with npm
$ npm install query-device --save
install with yarn
$ yarn add query-device
;const queryDevice = ;
There are several ways to use Browserify and Webpack. For more information on using these tools, please refer to the corresponding project's documentation.
const QueryDevice = ;const queryDevice = ;
You can add viewport listeners with multiple choices
easy query device
you can simply your query devices with this below notation
this is equal to previous query device, and you can access to a list devices, with dimension already save, and give a device object as argument to your query devices.
You can access to devices list with static attribute:
should be output:
"name": "iPhone XR" "size": "414x896""name": "iPhone XS" "size":"375x812""name": "iPhone XS Max" "size":"414x896""name": "iPhone X" "size":"375x812""name": "iPhone 8 Plus" "size":"414x736""name":"iPhone 8" "size":"375x667"// ...
device object as query device
you can target a device with the device name with the static method:
?object QueryDevice.findDeviceByName( string deviceName )
;const iPhoneXrDevice = QueryDevice;const queryDevice = ;queryDevice;
remove a query device
If during the lifecycle of your app you have need detach a query device you can
use the third argument of
add method who is identifiant of query device as
const idQueryDevice = "mobile-device";queryDevice;
Then you can any time use
remove method for detach the query device.
And now you query device for
"mobile-device" is detach with success 👍.
With a device object as query device the default identifiant is the name of device
details of query device
QueryDevice attach only one listener of window resize for all query devices, your query device is add to a array
the global listener execute all query devices inside this array,
during remove of one query device the array
mediaEvents remove your query device and during next event resize your query is not execute. This behavior is favorite for events optimzation reason if you have detach all query devices the global event is detached and if you re attach any query devices this is re attached.
callback query devices
The callback for your query device is execute only if viewport change with your constraints.
E.g: in assumed you attach this bellow query device
If the viewport switch from:
580x700 your callback is not execute
because you ask a query device for:
416x640 this equal to:
min-width: 416px AND min-height: 640px
But if viewport switch from:
380x580 you callback is execute because new viewport have not respect you constraint query device and the argument
isMatches is false