What is the best way to prevent an element from loading on a mobile device?

Question

css

Hello.

Please tell me how it would be more correct to prohibit the loading of an element on mobile devices.
For example, I need to disable the initialization of the slider at a resolution of 320px / 568px and remove its block in HTML

1. Use modernizr

if($('.iphone').length){
     // код или вызов плагина
})

2. Stupidly checking for window width

if($(window).width() >= 320){
     // код или вызов плагина
     // этот код сработает только при ширине равной или больше 320
})

If you use modernizr, then how to deal with other mobile phones in this case, add checks for the OS, touch events, etc.?
Or are there other ways?

Answer 1

Didn't understand the point.
I generally close the menu from above, add margin-top to the container. If you want the block to be full screen in min-height: 100% height, there will most likely be a problem with size inheritance, so all blocks "parents" min-height: 1px, min-height: 100% including body and html;
blocks then height: 50%
upd: I see that the height is inline.
If in width, then min-width is some kind, because the positions of the elements are set somehow and media (max-width: 1366px) .cell-pf
I would have done it differently in general, they gave me a cap for such a layout in the office :)
Specify the task, I will explain

Answer 2

You can also use Modernizr

Modernizr.load([
  {
    test: 320 >= window.screen.width,
    yep:   "big.js",
    nope: ["small.js", "small.css"]
  }
]);

Answer 3

via css media query:

@media (max-width: 320px) {
  .block {
    display:none;
  }
}

Answer 4

Conditional Loading for Responsive Web Design