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?
Detecting Mobile vs Desktop
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
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
- CosmickGold
-
- Posts: 29
- Joined: Thu May 12, 2016 6:31 pm
- Location: Arlington, Texas
- Contact:
Detecting Mobile vs Desktop
My contact info: WebViews.us@gmail.com
Re: Detecting Mobile vs Desktop
As far as I know using media queries still gets the job done. Hide the object in larger breakpoints.
- CosmickGold
-
- Posts: 29
- Joined: Thu May 12, 2016 6:31 pm
- Location: Arlington, Texas
- Contact:
Re: Detecting Mobile vs Desktop
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:
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:
(Also, I must set it correctly when the page first loads with version of:
But that's easy.
Again, thank you for providing "The Golden Key". It fit the lock perfectly.
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>
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";
Code: Select all
<body onload="myFunction()">
Again, thank you for providing "The Golden Key". It fit the lock perfectly.
My contact info: WebViews.us@gmail.com
Re: Detecting Mobile vs Desktop
Just curious but why can't you use the built-in breakpoint facilities provided by WWB?
Or am I missing something?
Or am I missing something?
Re: Detecting Mobile vs Desktop
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!
Above, Beyond, and @wwonderfull! <- Genuinely helps you with a powered up site that counts! Four Times Excellence!
- CosmickGold
-
- Posts: 29
- Joined: Thu May 12, 2016 6:31 pm
- Location: Arlington, Texas
- Contact:
Re: Detecting Mobile vs Desktop
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.
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