Forum Home
Press F1
 
Thread ID: 142959 2016-10-18 02:06:00 Problem with script to divert to a phone friendly site mzee (3324) Press F1
Post ID Timestamp Content User
1427607 2016-10-18 02:06:00 In my website I have a script which diverts the viewer to a mobile friendly mini site. It is placed in the <header>.
In this if the logged on screen is equal to or less than 750px wide it is diverted to ..../mobile/

<!--
if (screen.width <= 750) {
window.location = "kenyapages.net.nz
}
//-->

I want to do the same with other resolutions i.e 320 & 480.
What is needed is:
the logged on screen is equal to or less than 750px wide but not less than 480px it is diverted to ..../mobile/
the logged on screen is equal to or less than 480px wide but not less than 320px it is diverted to ..../mobile/
the logged on screen is equal to or less than 320px wide it is diverted to ..../mobile/

I can then have several suitable mini sites.

Help would be appreciated :) 		mzee (3324)
1427608 2016-10-18 08:18:00 this might save some time and server space use % instead of px instead of coding several different landing pages

www.w3schools.com 		beama (111)
1427609 2016-10-18 08:30:00 this might save some time and server space use % instead of px instead of coding several different landing pages

www.w3schools.com

:+1:

You would be much better off coding a responsive website rather than different pages for different devices. :)

See also CSS media queries: developer.mozilla.org 		pcuser42 (130)
1427610 2016-10-18 18:54:00 :+1:

You would be much better off coding a responsive website rather than different pages for different devices. :)

See also CSS media queries: developer.mozilla.org

yep. in the bad old days we used to use a table set that to 90 % of available screen real estate. Let the browser do the rendering and put all the content in the table. Made for some interesting layouts when the page displayed was on a screen with different resolutions. Much easier these days. 		beama (111)
1427611 2016-10-18 19:10:00 I am sure I mentioned to you before mzee that you should use a framework to do the dirty work like bootstrap or foundation. You are just increasing your work by making seperate mini sites targetting different devices.

I use to develop seperate sites too, sites that were in different languages, sites aimed at different devices. It was a nightmare to maintain.

You should use a javascript library like jquery so you have browser compatible code to use.

To answer you, you order your code from least likely to likely. So small to big and if no condition is met, a default page.

I'm on my phone so i'll speak in psuedo

if width is 320px or less goto here
else if width 480px or less goto here
else if ...
else goto default 		Kame (312)
1427612 2016-10-18 23:14:00 I have tried the responsive method but its more trouble than its worth. No problem making individual sites, if you use tables all you have to do is alter the template width, then tidy it up, change the name.
This script works:
script type="text/javascript">
<!--
if (screen.width <= 720) {
window.location = "xxxx.net.nz
}
if (screen.width <= 320) {
window.location = "xxxx.net.nz
}

//-->
</script> 		mzee (3324)
1427613 2016-10-18 23:45:00 if you use tables all you have to do is alter the template width, then tidy it up, change the name. I just got shivers down my spine... Using tables for layouts actually makes making responsive websites more difficult as they don't adapt to different screen sizes very well. pcuser42 (130)
1427614 2016-10-19 07:22:00 How does that script work correctly, its flawed at the start where anything less or equal to 720px goes to m1, 320px is less than 720px and makes that condition true.

As I said, start small and work your way up. Otherwise I feel like i'm wasting my time if you won't listen. 		Kame (312)
1427615 2016-10-19 13:21:00 if (screen.width < 321) {
window.location = "xxxx.net.nz
}
else if (screen.width < 481) {
window.location = "xxxx.net.nz
}
else if (screen.width < 721) {
window.location = "xxxx.net.nz
}
else {
window.location = "xxxx.net.nz
} 		Kame (312)
1427616 2016-10-24 12:14:00 if (screen.width < 321) {
window.location = "xxxx.net.nz
}
else if (screen.width < 481) {
window.location = "xxxx.net.nz
}
else if (screen.width < 721) {
window.location = "xxxx.net.nz
}
else {
window.location = "xxxx.net.nz
}

This works well. Only problem is that some of the resolutions are not the same in practice. For instance, my son's Samsung Galaxy is suppose to be 720px across, but is actually 440px. I have done a few responsive sites which are good when you do frequent updates, or the site is a large one. 		mzee (3324)
1 2