Load code according to device

Asked

Viewed 80 times

1

The excerpt below is similar to what I have on the website homepage:

<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 has php and html, my doubt is about which functions of jquery I can study to make it possible to print this excerpt in the code depending on the size of the device (desktop, mobile, etc) used?

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

javascript jquery

  • What do you mean "print this excerpt in the code"? Do you want this div to exist only in the source code of the page on a certain type of device? There is no Javascript in the world that does this.

  • I appreciate the response, but I think it’s possible, about printing I think you can use the .append(), after a conditional checking the size of the device used

  • 1

    The question is how do I capture the size of the device, when loading the page, by DOM

2 answers

1


You don’t need jQuery. With pure Javascript, you can access object screen of the global variable window and get screen resolution, i.e.:

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 bit smaller.

Now, always remember:

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

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

Identify if the device is pc or mobile and use a different code for each

Run javascript only when accessing a mobile phone’s website

How to detect a mobile device in Javascript?

  • 1

    if (screen.width < 640 || screen.height < 480) {&#xA; // sirva a versão pra celular&#xA;}... Thank you Renan, that’s exactly it

0

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

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

It is still not very clear what you want to do, but I believe if you use this form to search for the width and current height of your viewport, you can do the calculations you want.

  • Using jQuery to get these values is like using a shotgun shot to kill a fly. Also this is the window size, not the device resolution.

  • I just answered what he asked. He wanted to know how to capture the size by Jquery, and that’s what I answered. There are thousands of ways to do this, and it all depends on what the user prefers. I particularly prefer using frameworks with grids. But since I don’t know what he wants to do, I passed what he asked. The code returns the size of the window being displayed, regardless of the size of the device, which may be quite useful in some cases. Ai depends on it.

  • @Fernandovr Thank you for your reply too, thank you very much

  • Dispo @Gislef ^_^

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.