...

View Full Version : mobile phone and large websites



alan82
07-17-2012, 06:32 PM
I have

<script type="text/javascript">
<!--
if (screen.width <= 699) {
document.location = "mobile/indexmobile.html";
}
//-->
</script>

in my index.html page of my website to re-route small screen browsers to a small version of my site.
I appreciate that some mobile phone users will want to view my main site rather than my mobile version. So I wondered what code I could use that would identify a second visit from the same phone and allow it to view my main site rather than re-routing it again to the mobile site.
This way, I could simply have a link on the mobile site that says "Visit Main Site".
Any help much appreciated.

Philip M
07-17-2012, 08:19 PM
Use a cookie to detect whether the user has visited this site before.

But why not just have "Visit Main Site" as a link even on the first visit?

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

alan82
07-17-2012, 09:30 PM
Ok but I prefer to have it automatically redirect so mobiles get a fast loading page as a first option.

How do I go about using a cookie in this way?

Philip M
07-17-2012, 09:44 PM
How do I go about using a cookie in this way?

Cookies have been covered very many times in this forum. Try using the search feature.

Here is a suitable example:-


<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {var expires = ""}
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
</script>
</head>

<body>
<div id = "message"></div>

<script type="text/javascript">
// place this script immediately before the </body> tag.
if(!readCookie('beenHereBefore')) {
document.getElementById("message").innerHTML = "You have not visited this site before.";
createCookie('beenHereBefore', 'beenHereBefore', 365); // 365 days persistence
}
else {
document.getElementById("message").innerHTML = "You have visited this site before.";
}

</script>

</body>
</html>

alan82
07-17-2012, 11:41 PM
ok thanks for that.
So would this suit my purpose? I added document.location = "mobile/indexmobile.html"; after if(!readCookie('beenHereBefore')) {



<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script type="text/javascript">
function createCookie(name,value,days) {
if (days) {
var date = new Date();
date.setTime(date.getTime()+(days*24*60*60*1000));
var expires = "; expires="+date.toGMTString();
}
else {var expires = ""}
document.cookie = name+"="+value+expires+"; path=/";
}

function readCookie(name) {
var nameEQ = name + "=";
var ca = document.cookie.split(';');
for(var i=0;i < ca.length;i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1,c.length);
if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length,c.length);
}
return null;
}

function eraseCookie(name) {
createCookie(name,"",-1);
}
</script>
</head>

<body>
<div id = "message"></div>

<script type="text/javascript">
// place this script immediately before the </body> tag.
if(!readCookie('beenHereBefore')) {
document.location = "mobile/indexmobile.html";

createCookie('beenHereBefore', 'beenHereBefore', 365); // 365 days persistence
}
else {
document.getElementById("message").innerHTML = "You have visited this site before.";
}

</script>

</body>

Philip M
07-18-2012, 08:25 AM
ok thanks for that.
So would this suit my purpose? I added document.location = "mobile/indexmobile.html"; after if(!readCookie('beenHereBefore')) {


No - you must create the cookie before the page redirect. And document.location is a (deprecated but still present) read-only string property.


if(!readCookie('beenHereBefore')) {
createCookie('beenHereBefore', 'beenHereBefore', 365); // 365 days persistence
window.location.href = "mobile/indexmobile.html";
}

alan82
07-19-2012, 10:44 PM
I appreciate the help.
It occurred to me that I am forcing a second visit to the the main website when in fact the visitor may want to return to the mobile site version.
I am thinking the only way round this is to ensure the same content is on the mobile as is on the main site but kept much lighter. (very small file sizes for pictures and only css for styling (no images).
I still want that fast download experience so I will use the...

<script type="text/javascript">
<!--

if (screen.width <= 699) {
window.location.href = "mobile/indexmobile.html";
}
//-->
</script>

Instead of the deprecated one I used initially.

Philip M
07-20-2012, 08:27 AM
Simply give your visitor, if he is using a mobile device, the option to visit the main site if he wishes.

hdewantara
07-20-2012, 08:27 PM
Untested and oversimplified...

How about something like below (for index.html):

<script type="text/javascript">
var q = location.search.substr(1).split('=');
if ( (q[0] == 'noReRoute') && (q[1] == 'true') ){
//nothing to do, let user into desktop version
}
else{
if (screen.width <= 699){
window.location.href = "index_mobile.html";
}
}
</script>
And include a link there (index.html too):

<a href="index_mobile.html?noReRoute=true">Mobile</a>

So your index_mobile.html shall have that same code but with screen.width logic reversed, and with links to index.html

alan82
07-21-2012, 06:13 PM
Ok (as suggested by hdewantara) for my index.html page I have

(within the head tags)

<script type="text/javascript">
var q = location.search.substr(1).split('=');
if ( (q[0] == 'noReRoute') && (q[1] == 'true') ){
//nothing to do, let user into desktop version
}
else{
if (screen.width <= 699){
window.location.href = "indexmobile.html";
}
}
</script>

and this within the body.

<a href="indexmobile.html?noReRoute=true">Mobile</a>


for the indexmobile page i have
(Again in the header.)

<script type="text/javascript">
var q = location.search.substr(1).split('=');
if ( (q[0] == 'noReRoute') && (q[1] == 'true') ){
//nothing to do, let user into desktop version
}
else{
if (screen.width >= 699){
window.location.href = "index.html";
}
}
</script>

and in the body

<a href="index.html?noReRoute=true">main site</a>

I still have the problem that if the mobile phone visitor specifically wants to visit my main index.html page, **when they click on "main site" in the indexmobile.html page, it still redirects back to indexmobile.html instead of going to index.html.

So I'm very happy with the idea that the mobile visitor is automatically directed to the indexmobile.html (nice and fast), and even happier that he is then able to visit the main site using a "main site" link on the indexmobile.html page.

The problem I am having is that the **last bit isn't working with the code i'm using above. (namely, the visitor can't get to my main site with a mobile phone).

tracknut
07-21-2012, 06:36 PM
Dunno if you're up for a bit of server side code, but I do this via allowing a parameter on the index page. For example, http://www.example.com/index.php?page=mobile, or ?page=desktop, both of which circumvent all checking for other things like screen width, and just go to the requested page. I use that in the "I'm on a mobile, but really I want to see the large site" link (and the converse on the large site page).

Dave

alan82
07-21-2012, 07:24 PM
apologies to hdewantara
Ok (as suggested by hdewantara) for my index.html page I have
I made a mistake at my end and it was all working very well now. So thank you.



Dunno if you're up for a bit of server side code
Yes I would be interested to also find out more about the server sided code.
Can you explain further how this would work?

tracknut
07-21-2012, 10:55 PM
You would do something like this, toward the top of your index file (php example):


switch($_GET['page'])
{
case 'mobile':
$mode = "mobile";
// display mobile index page
break;
case 'desktop':
$mode = "desktop";
// display desktop version of index page
break;
default:
// do all the js you're currently doing to detect and display the correct
// page based on screen width
break;
}


Then on the mobile site, you could put a link like:


<a href="index.php?mode=desktop">Click here for full version of site</a>


Dave

hdewantara
07-22-2012, 08:32 AM
@Alan82: You're welcome. I'm glad it works :thumbsup:
@Dave: Yes, parameter passing this way should be best handled by server side's. My oversimplified code might be problematic whenever there are other parameters to be passed as well.

Hendra



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum