Detecting Mobile vs Desktop

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
CosmickGold
 
 
Posts: 29
Joined: Thu May 12, 2016 6:31 pm
Location: Arlington, Texas
Contact:

Detecting Mobile vs Desktop

Post 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?
My contact info: WebViews.us@gmail.com
User avatar
crispy68
 
 
Posts: 2737
Joined: Thu Oct 23, 2014 12:43 am
Location: Acworth, GA
Contact:

Re: Detecting Mobile vs Desktop

Post by crispy68 »

As far as I know using media queries still gets the job done. Hide the object in larger breakpoints.
User avatar
CosmickGold
 
 
Posts: 29
Joined: Thu May 12, 2016 6:31 pm
Location: Arlington, Texas
Contact:

Re: Detecting Mobile vs Desktop

Post 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.
My contact info: WebViews.us@gmail.com
WWBman
 
 
Posts: 916
Joined: Fri Jan 08, 2010 6:10 pm

Re: Detecting Mobile vs Desktop

Post by WWBman »

Just curious but why can't you use the built-in breakpoint facilities provided by WWB?
Or am I missing something?
User avatar
jerryco
 
 
Posts: 826
Joined: Fri Mar 27, 2009 2:42 pm
Location: Purmerend, Holland

Re: Detecting Mobile vs Desktop

Post 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.
// Love is the acceptance of nothing / Account age is no guarantee of efficiency ;-) ->

Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
User avatar
CosmickGold
 
 
Posts: 29
Joined: Thu May 12, 2016 6:31 pm
Location: Arlington, Texas
Contact:

Re: Detecting Mobile vs Desktop

Post 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.
My contact info: WebViews.us@gmail.com
Post Reply