Below, I put in a sample code, the whole trick is that when the screen is narrowed, the code changes, but if I choose a mobile device whose width is less than that specified in the condition, then nothing happens.

function SCREENmove() { width = document.documentElement.clientWidth; height = document.documentElement.clientHeight; if (width > 799) { $('.node').addClass("response") } else { $('.node').removeClass("response") } } $(window).resize(SCREENmove); $(document).ready(SCREENmove); 
 .node { width: 100%; height: 50px; display: block; position: relative; background: #CDDC39; } .node.response { background: #FF9800; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div class="node"></div>

works when narrowing: enter image description here

mobile (class not retired): enter image description here

  • And what should happen? If you have a width less than that, the class "response" is deleted, which is not originally in the layout. If the width on the phone is less than 799 pixels, then nothing will happen and will not. - Dmitriy Kondratiuk
  • @DmitriyKondratiuk, for this and set different colors, if it is orange, then there is a class. If you enable viewing from a mobile device, it is lit in orange (there is a class), besides it is in the code, the class has not been deleted. If you just narrow the screen, then the class is removed - Evgeny Shevtsov
  • Well, in your example, the initial "response" class is not <div class="node"></div> . - Dmitriy Kondratiuk
  • Orange is indicated for the response class, look carefully. On the desktop version (if the width is more than 799), a response appears when it is narrowed, but it disappears on the mobile class, although the width remains less than 799 - Yevgeny Shevtsov
  • @DmitriyKondratiuk changed the screens so that it was clear - Yevgeny Shevtsov

1 answer 1

Add <meta name="viewport" content="width=device-width"> to <head></head> without it document.documentElement.clientWidth does not correctly return the width of the screen in emulator mode, for example, in opera it's always 980px not depending on the width of the emulator. Therefore, there is, he did not "not retire", but rather was added, because width returns greater than 799px