How to hide the map?

Question

JavaScript

Uses Smarty templating engine,
There is a block

<div class="show_map">{include file='map.tpl'}</div>

How to make this block displayed only when the screen width is <640 , the
condition is
if (document.body.clientWidth >640) {
not possible to display the block itself

Answer 1

Through CSS.

@media only screen and (max-width: 640px) {
    .show_map {
        display: none;
    }
}

Answer 2

We wrap the map in an iframe and load it only on wide screens, or if the browser is stretched to a sufficient width. When narrowing the screen, we simply make the map display:none;
These manipulations are quite easy to implement in js.

Answer 3

I would personally use @media screen, if using *js, then you need the , object property window, window.innerWidthwhich is responsible for the width of the browser window, not the page element.

Answer 4

document.addEventListener('DOMContentLoaded', function(event) {
  var elem = null;

  if (window.matchMedia("(min-width: 640px)").matches) {
    elem = document.querySelector('div.show_map');
    elem.parentNode.removeChild(elem);
  }
});

Answer 5

@media screen and (max-width: 640px) {
    .show_map {
        display: none;
    }
}