Page 1 of 1

Detecting Mobile vs Desktop

Posted: Wed Jun 23, 2021 8:18 pm
by CosmickGold
I want to send an "easy to read" page to cell phones, but using screen width doesn't work since modern cell phones have gobs of horizontal pixels, even on their tiny screens.

What can I use to detect if it's a tiny screen?

Re: Detecting Mobile vs Desktop

Posted: Wed Jun 23, 2021 9:19 pm
by crispy68
As far as I know using media queries still gets the job done. Hide the object in larger breakpoints.

Re: Detecting Mobile vs Desktop

Posted: Thu Jun 24, 2021 2:43 am
by CosmickGold
Thank you crispy68, for handing me "The Golden Key", which was the two words "media queries".

I had not heard of them, but spent the next 90 minutes searching Google for them.
"Media queries" led me to "@media" and a list of values it can provide.
I saw "height" was one of those values, and I thought to myself,
"Desktops are wider than tall, and cell phones are taller than wide. Eurika, I have it! Compare high and wide!"
But soon, that search led to the "@meda" value named "orientation", which has high and wide already compared.

So, two hours after reading your reply, I have code that works:

Code: Select all

<script type="text/javascript">
  window.addEventListener('resize', function() {
    var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;
    if (orientation.includes("portrait"))
      { alert("IS A CELL PHONE"); }
    else
      { alert("IS A DESK TOP"); }
  });
</script>
I tip my cell phone 90 degrees, and it tells me correctly which way I'm looking at it.
Now I just need to swap the "alert()s" for page redirections, like:

Code: Select all

window.location.href = "http://www.webviews.us/dreamlight.html";
(Also, I must set it correctly when the page first loads with version of:

Code: Select all

<body onload="myFunction()">
But that's easy.

Again, thank you for providing "The Golden Key". It fit the lock perfectly.

Re: Detecting Mobile vs Desktop

Posted: Thu Jun 24, 2021 10:39 am
by WWBman
Just curious but why can't you use the built-in breakpoint facilities provided by WWB?
Or am I missing something?

Re: Detecting Mobile vs Desktop

Posted: Thu Jun 24, 2021 11:55 am
by jerryco
Personally I'm curious for anything smart that does not breakpoint the page. Will have to see about working with it, though. Seems easier.

Re: Detecting Mobile vs Desktop

Posted: Fri Jun 25, 2021 12:38 am
by CosmickGold
Well, I have your answer, and a much better solution I've now switched to. I've already posted it at:
viewtopic.php?f=65&t=92072&p=461298#p461298
so I won't go into it again here. But go take a look.