jQuery Mobile/Tablet Detect

[JfantasyBooks]

Hi

site: https://fantasy-books.live

Problem:

Has X theme already added some sort of way to detect mobile/tablet user via jQuery? And if so, what can I use to implement it in my code?

Thanks

J.

[Prasant]

Hello @JfantasyBooks,

Thanks for asking.

I am slightly confused with your question. I am not quite sure as in what you want to implement in your code. To answer your question, we use predominantly use CSS media queries to detect viewports and display content accordingly.

If you would like to learn more about CSS media queries, please take a look at following tutorials:

https://www.w3schools.com/css/css_rwd_mediaqueries.asp
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://developers.google.com/web/fundamentals/design-and-ux/responsive/

Thanks.

[JfantasyBooks]

Ah, so it is by css only?

Okay then. Thanks.

J.

[friech]

Hi There,

There is a JS involve in some of it, like when the video-poster shows on mobile instead of the video, and some sort. But yes, it is mostly with CSS @media queries. Here are the few common of it:

/*between 980px and 1200px screen*/
@media (min-width: 980px) and (max-width: 1200px) {
	/*YOUR CSS RULES HERE*/
}


/*979px screen and below*/
@media (max-width: 979px) {
	/*YOUR CSS RULES HERE*/
}

/*767px screen and below*/
@media (max-width: 767px) {
	/*YOUR CSS RULES HERE*/
}

/*480px screen and below*/
@media (max-width: 480px) {
	/*YOUR CSS RULES HERE*/
}

Cheers!

[JfantasyBooks]

Gotchya. CSS only. Thanks for looking into it.

[friech]

We are delighted to assist you with this.

Cheers!