Load code according to device

Navigation
1

The following is similar to what I have on the home page of the site: 

<div class="text-center">
    <div id="minhaClass">
        <a href="<?php echo get_site_url(); ?>/texto-1/">texto 1</a>
       <a href="<?php echo get_site_url(); ?>/texto-2/">texto 2</a>
        <a href="<?php echo get_site_url(); ?>/texto-3/">texto 3</a>
     </div>
</div>

In this code you have php and html, my question is what jquery functions can I study to make it possible to print this snippet in code depending on the size of the device (desktop, cell, etc.) used?

I know that it is possible to use @media queries as a reference when loading, but as I capture this with jquery, what functions allow this

    
asked by anonymous 26.09.2017 / 23:29

2 answers

1

You do not need jQuery . With pure Javascript you can access the object screen of the global variable window and get screen resolution, ie: 

console.log('Minha resolução é ' + screen.width + 'x' + screen.height);

Note that this is the resolution of the device. The really visible area of your page, with the browser maximized, will almost always be a little smaller.

Now, always remember:

  • Resolution is not size A tablet or even a high end cell phone may have the same resolution as an older monitor on a smaller screen;

  • Never try to determine the type of device by the resolution of your screen. Today there are large screens that are touch sensitive, for example, so you can use friendly interfaces. If you really want to segregate your content across different devices, treat them by capabilities, not by resolution (nor by useragent ). I have some more elaborate answers on the subject in some previous questions:

Identify whether your device is a PC or cell phone and use a different code for each

Execute javascript only when accessing a mobile site

How to detect a mobile device in Javascript?

    
26.09.2017 / 23:44
0

With Jquery you can capture the size of the viewport with the code:

$( window ).width(); and $( window ).height();

It's still not very clear what you want to do, but I think if you use this form to find the current width and height of your viewport, you can do the calculations you want.

    
26.09.2017 / 23:47
Rails 5 validate CPF Tie "for" inside another "for" (nested repetition)