Adaptive jQuery without window.matchMedia
Electric bike instead of a regular bus. I want to share my method of adapting jQuery scripts (I used to write scripts on jQuery myself, but there is no difference, everything described is true for pure javascript) in parallel with the adaptation of a web layout.
To adapt to different screen resolutions and various devices use media queries in CSS. Suppose we have an adaptation of our layout for 2 ranges: from 0 to 479 pixels and up to 800 pixels.
We want to use different animations and / or server requests depending on the screen size. Those. we need to respond to the javascript scripts in parallel with the triggering the copper request from CSS. For this there are at least 3 ways.
Academic . A special javascript: window.matchMedia method that determines the triggering of a media query similar to CSS:
')
The disadvantage of this method is the presence of an explicit indication of the range of screen resolution in 2 places: CSS and javascript. When you change the range in CSS, you can forget to change it in javascript, as a result we get a bug in the site, with a certain width of the window layout adapts, and the corresponding functionality or animation has not yet connected. Plus there is a limitation of support for this method in outdated versions of browsers.
Crutch method number 1 . The easiest and probably obvious method is to add a condition to the script to check the current size of the browser window.
The disadvantage of this method is also the presence of duplication of screen sizes in CSS and javascript and some problems with getting adequate cross-browser window sizes on various platforms.
Crutch method number 2 . Now about the method that I use. It consists in using html flags for each range. The real construction of the layout, which appears only in the required size range, or an empty single-pixel div can act as a flag.
Html:
CSS:
And in the script itself, we simply check if our marker is shown:
In this example, we explicitly specify the ranges of screen sizes only in CSS and, when changed, we do not need to worry about the performance of scripts. Also, the cross-browser compatibility of the last example is affected only by browser support for media queries.
Go ahead and connect the mobile script only if necessary:
Thanks for attention!
To adapt to different screen resolutions and various devices use media queries in CSS. Suppose we have an adaptation of our layout for 2 ranges: from 0 to 479 pixels and up to 800 pixels.
@media screen and (max-width: 800px) { /* CSS */ } /* */ @media screen and (max-width: 479px) { /* CSS */ } We want to use different animations and / or server requests depending on the screen size. Those. we need to respond to the javascript scripts in parallel with the triggering the copper request from CSS. For this there are at least 3 ways.
Academic . A special javascript: window.matchMedia method that determines the triggering of a media query similar to CSS:
')
var mql = window.matchMedia('all and (max-width: 479px)'); if (mql.matches) { // 479px } else { // , 479px } The disadvantage of this method is the presence of an explicit indication of the range of screen resolution in 2 places: CSS and javascript. When you change the range in CSS, you can forget to change it in javascript, as a result we get a bug in the site, with a certain width of the window layout adapts, and the corresponding functionality or animation has not yet connected. Plus there is a limitation of support for this method in outdated versions of browsers.
Crutch method number 1 . The easiest and probably obvious method is to add a condition to the script to check the current size of the browser window.
The disadvantage of this method is also the presence of duplication of screen sizes in CSS and javascript and some problems with getting adequate cross-browser window sizes on various platforms.
Crutch method number 2 . Now about the method that I use. It consists in using html flags for each range. The real construction of the layout, which appears only in the required size range, or an empty single-pixel div can act as a flag.
Html:
<!DOCTYPE html> <html> <head> <title> </title> </head> <body> <div class=”max_width_800”></div> <div class=”max_width_479”></div> </body> </html> CSS:
.max_width_800{ display: none; } .max_width_479{ display: none; } @media screen and (max-width: 800px) { .max_width_800{ display: block; } .max_width_479{ display: none; } } @media screen and (max-width: 479px) { .max_width_800{ display: none; } .max_width_479{ display: block; } } And in the script itself, we simply check if our marker is shown:
if ($('.max_width_800').is(':visible')) { // jQuery } if ($('.max_width_479').is(':visible')) { // jQuery } In this example, we explicitly specify the ranges of screen sizes only in CSS and, when changed, we do not need to worry about the performance of scripts. Also, the cross-browser compatibility of the last example is affected only by browser support for media queries.
Go ahead and connect the mobile script only if necessary:
var head = $('head'); includeScripts(head); $(window).resize(function(){ includeScripts(head); }); function includeScripts(head){ if ($('.max_width_800').is(':visible')) { head.append('<script type="text/javascript" src="mobile-800.js" id=”script-mobile-800”></script>'); $('#script-mobile-479').remove(); } if ($('.max_width_479').is(':visible')) { head.append('<script type="text/javascript" src="mobile-479.js" id=”script-mobile-479”></script>'); $('#script-mobile-800').remove(); } } Thanks for attention!
Source: https://habr.com/ru/post/318972/
All Articles