query-device
You have need dynamic responsive for your app, css cant full coverage, now you can use a handler of viewport device, easy usage.
CDN usage
Learn more with CDN usage
Script tag
installation
you should local install with your handler dependencies fovorite
install with npm
$ npm install query-device --save
install with yarn
$ yarn add query-device
import
Babel
Babel is a next generation JavaScript compiler. One of the features is the ability to use ES6/ES2015 modules now, even though browsers do not yet support this feature natively.
; const queryDevice = ;
Browserify/Webpack
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 = ;
usage
You can add viewport listeners with multiple choices
queryDevice;
easy query device
you can simply your query devices with this below notation
queryDevice;
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.
devices list
You can access to devices list with static attribute: deviceList
console;
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: findDeviceByName
?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 string
const idQueryDevice = "mobile-device"; queryDevice;
Then you can any time use remove
method for detach the query device.
queryDevice;
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
global event
The QueryDevice
attach only one listener of window resize for all query devices, your query device is add to a array mediaEvents
and
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
queryDevice;
If the viewport switch from: 1200x960
to: 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: 580x700
to: 380x580
you callback is execute because new viewport have not respect you constraint query device and the argument isMatches
is false