Viewing Window.location mobile site

  1. Portal Home
  2. Forum
  3. EverWeb
  4. How do I...?

Window.location mobile site



User: Raf P. 11 years ago
Hi,

I created a website in EW: 960px width
I created a mobile version of this site (subdomain): 320px width

In the Publishing Settings of the main site I gave in:
if (screen.width <= 600) {window.location = "http://www.dierenartsfrankslegers.be/mobile"; }
In the Publishing Settings of the mobile site (subdomain) I gave in:
if (screen.width >= 600) {window.location = "http://www.dierenartsfrankslegers.be"; }

Google found all of these pages. Depending on the device, it goes straight to the preferred page.
Unfortunately, on a 600px device, it goes wrong. The browser don't know where to go and flashes between both versions with a white screen.

Does anyone know a solution please?

Last edit 11 years ago

-------------------------------
Kind regards,

Raphael Pairoux
User: Roddy 11 years ago
Choose another value for one of them.

In practice, you wouldn't want your 320px wide site to appear on any device which had a screen size of more than about 480px in either direction. So, change the equal to or less than value to 480 and the equal to or more than value to 500.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Raf P. 11 years ago
Thx Roddy,
suppose I change the mobile site under 480px and the main site above 600px. What happens with the visitors between 480? and 600px?

-------------------------------
Kind regards,

Raphael Pairoux
User: Raf P. 11 years ago
Thx Roddy,
suppose I change the mobile site under 480px and the main site above 600px. What happens with the visitors between 480? and 600px?

-------------------------------
Kind regards,

Raphael Pairoux
User: Roddy 11 years ago
Just make the two values slightly different like 480px and 485px.

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Jumbo T. 11 years ago
Try Boolean logic.

My screen is 500px.

I enter one of your pages.

The test :

<= (equal OR smaller) 600 = Yes : goto mobile page.

>= (equal OR larger) 600 = No : stay on page.

My screen = 600px

The test :

<= (equal OR smaller) 600 = Yes : stay on page.

>= (equal OR larger) 600 = Yes : stay on page.
User: Raf P. 11 years ago
Thanks both of you!
I'm going to try this out.

-------------------------------
Kind regards,

Raphael Pairoux
User: Jumbo T. 11 years ago
To test for mobile devices in a desktop browser, use this script to test when a desktop page is loaded on a mobile device :

<script>

if ( window.innerWidth <= 600 ) { window.location = "mobile.html"; }

</script>

And this to test when a mobile page is loaded on a desktop computer :

<script>

if ( window.innerWidth >= 600 ) { window.location = "desktop.html"; }

</script>

It uses the width of the browser page. Which is usually also the screenwidth of mobile devices, since browserwindows cannot be resized.

It can also be used to test for portrait and landscape. Unlike screen.width, which uses the portrait width, even when hold in landscape.

Which will drive the visitor crazy if he changes from portrait into landscape vv. and browse the site.

Last edit 11 years ago
User: Jumbo T. 11 years ago
I noticed that to make it work, you have to add this code to the HEAD CODE BOX of the page :

<meta name="viewport" content="user-scalable=1, width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />

I'm sure there will be all kind of exceptions.
User: Christopher 11 years ago
Hey Jumbo, thanks for answering my question too. I think. I had the above code minus the "initial-scale=1". My mobile site is 420px wide. It autosized the width perfectly on iPhone 6 plus down to 5 (so assumedly all of them). But then I tested on some android phones and the site was too large to fit in the viewport. I hope adding this initial-scale will auto-size the width to fit all mobile browsers!

My code, with a couple variations:

<meta name="viewport" content="user-scalable=yes, width=device-width, initial-scale=1, maximum-scale=5.0, minimum-scale=1.0" />

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Christopher 11 years ago
Okay, didn't work. And I've tried every variation of the code I can think of. My initial code works for iPhones but not android. What is the correct code please for scaling my 420px wide screen to fit every device under 600 and allow for scaling up to 5.0?

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com

samsung2.jpg
Cropped. Didn&#039;t scale as it did with iOS.
User: Christopher 11 years ago
Okay I removed the code offered by Jumbo above and my mobile site seems to work in both portrait and landscape mode in iOS and Android. EW inserts this: <meta name="viewport" content="width=420" />

Should I leave it as is? What was the point of this code?

<meta name="viewport" content="user-scalable=yes, width=device-width, maximum-scale=5.0" />

or this: <meta name="viewport" content="user-scalable=1, width=device-width, initial-scale=1.0, maximum-scale=2.0, minimum-scale=1.0" />

-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com
User: Roddy 11 years ago
Stop confusing yourself and use this...

<meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

If the visitor has to magnify anything then you, the designer, have screwed up. The visitor will get angry and never come back to your website!

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Roddy 11 years ago
To add to this, take note of what Google sees as being unfriendly...

A page is eligible for the “mobile-friendly” label if it meets the following criteria as detected by Googlebot:
Avoids software that is not common on mobile devices, like Flash
Uses text that is readable without zooming
Sizes content to the screen so users don't have to scroll horizontally or zoom
Places links far enough apart so that the correct one can be easily tapped

-------------------------------
Roddy

Website: http://everwebwidgets.com
Contact: http://everwebwidgets.com/ewWidgets-home/contact.html
NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own.
User: Christopher 11 years ago
I'm always confused. I'm not sure that's going to change! But you're only confusing me more because on this particular suggestion, I disagree. Virtually every site I visit on my phone including Google and Apple allows for pinching and double-tapping for zoom. It's not because the font is unreadable, it's just nice to have the ability to blow things up when you want. Like certain text boxes. Or photos. Appleinsider is one of this sites that doesn't allow for this and they take flak for it on their forums all the time. People want this option more than I suspect you think.

So to clear up my ongoing confusion over the matter, should I add the code (which didn't work on android, so what is it?) or just leave the viewpoint at a set width dimension of 420px? Thank you kindly :)

Quote: Roddy - 11/02/2015 5:58:09
Stop confusing yourself and use this...

<meta name="viewport" content="user-scalable=0, width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0" />

If the visitor has to magnify anything then you, the designer, have screwed up. The visitor will get angry and never come back to your website!


-------------------------------
rMBP 15", 2.6 Ghz, 16 GB RAM, OS X 10.11.6, with 27" Thunderbolt Cinema Display

www.cleetche.com


Post Reply
You must login or signup to post.