Platform.is.mobile

amoss

Hi

Let’s say I have a div (button) that should not appear if I run on a mobile’s browser (not electron).
Let’s say I have a div (qcard) that should be placed differently if running on a desktop’s browser or a mobile’s browser.
Is that what Platform.is.mobile for? Meaning, can I use it to switch between classes of a div depending if it’s a mobile or not?

What matters to me, is the width, not the platform itself. Is there a better way to detect it?
I know there’s media query in css but how can I decide if it’s a mobile or not? I have A70 with 1080x2240 resolution, how can I know if it’s my mobile or my desktop with this resolution?

Or am I missing something here?
Thanks

metalsadman

@amoss use screen plugin, see the docs.

dobbel

@amoss

I like to use gt- and lt- classes for showing a div only on mobile or desktop.

You can also show some DOM element or component if it’s lower than one of the sizes. Same for greater than one of the sizes. Just attach lt- or gt- prefixes, which come from “lower than” and “greater than”. Example: lt-md (display on xs and sm only)

https://quasar.dev/style/visibility#Window-Width-Related

metalsadman

@amoss said in Platform.is.mobile:

What matters to me, is the width, not the platform itself. Is there a better way to detect it?
I know there’s media query in css but how can I decide if it’s a mobile or not? I have A70 with 1080x2240 resolution, how can I know if it’s my mobile or my desktop with this resolution?

check for both, width first then for platform. example a computed prop:

// if it is
<q-card v-if="isItReallyMobile">
// or show something else
<q-card v-else>
isItReallyMobile () {
  return this.$q.screen.width === 1080 && this.$q.platform.is.mobile
}

https://quasar.dev/options/screen-plugin#API

https://quasar.dev/options/platform-detection#Introduction

amoss

Thank you for your answers. The button part should be easy because it’s either a mobile or not.

<q-btn class="getRelevantclass" />

computed: {
    return this.$q.platform.is.mobile ? "doHide" : "";
}
<style>
.doHide {
   display: none;
}

Am I right here? I understand correct that in a way, it relieves me from using css media query?

About the q-card, the 1080 was just an example to show that a mobile can have 1080px but it’s still too narrow. so I want a fixed right panel (qcard) to become a “regular” div that will be visible after all other divs. At the moment, the class is

.recentActivity {
    height: 97vh;
    position: fixed;
    margin: 10px;
    bottom: 0;
    top: 0;
    right: 0;
    width: 20%;
    box-shadow: 0 2.8px 2.2px rgba(0, 0, 0, 0.034), 0 6.7px 5.3px rgba(0, 0, 0, 0.048), 0 12.5px 10px rgba(0, 0, 0, 0.06), 0 22.3px 17.9px rgba(0, 0, 0, 0.072),
        0 41.8px 33.4px rgba(0, 0, 0, 0.086), 0 100px 80px rgba(0, 0, 0, 0.12);
}

Which works great on a desktop’s screen. Not so great on a mobile screen. And now, as I write this, I guess the platform detection might solve this issue as well, switching between 2 classes, depends on whether I’m on a mobile or not. I’ll check it out. Assuming I was right with the button example.
Thanks

No More Posting New Topics!

Platform.is.mobile