Resolution specific delivery

Mike Henson · #1 May 13th, 2006, 09:47

I hope I've posted this in the correct forum, I'm sure the answer will be Javascript.

Is there someway that I can check the resolution of a browser and then deliver the appropriately sized page?

Thank you

darryladie · #2 May 13th, 2006, 15:20

Code: Select all

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}

document.write(
 "Window width = "+winW+"<br>"
+"Window height = "+winH
)

Then you just need to add the page information for certain sizes, using a case statement or an If statement if there are only two outputs.

Mike Henson · #3 May 13th, 2006, 15:47

Thank you very much indeed darryladie for the code, unfortunately I don't know how to implement it or construct the "case statement" or "if statement".

Ideally, if the visitor is 800x600 they would go to index1.htm and if they're at 1024x768 or bigger they would go to index2.htm

darryladie · #4 May 13th, 2006, 16:23

OK, to redirect the user based on their resolution do the following:

Code: Select all

if (parseInt(navigator.appVersion)>3) {
 if (navigator.appName=="Netscape") {
  winW = window.innerWidth;
  winH = window.innerHeight;
 }
 if (navigator.appName.indexOf("Microsoft")!=-1) {
  winW = document.body.offsetWidth;
  winH = document.body.offsetHeight;
 }
}
if (winW<768) {
document.write('<META HTTP-EQUIV=Refresh CONTENT="1; URL=index2.htm>')
}

If you load index1.htm first, then if the user needs it the browser will redirect to the new page (index2.htm). Hope this helps (and works - I havent tested it)

Mike Henson · #5 May 13th, 2006, 16:31

Thank you darryladie, I shall try it straight away!

Mike Henson · #6 May 13th, 2006, 20:22

I'm afraid it didn't work.

I try placing it in different parts of the page but it appeared in view so I put script tags around it, it disappeared from view and I got the impression that it was trying to work but it didn't load index2.

darryladie · #7 May 14th, 2006, 13:59

Yeh you're right it doesn't, this now does, in both IE and FF:

Please this in your <head>:

Code: Select all

<script type="text/javascript">
function loadPage() {

      winW = window.innerWidth;
      winH = window.innerHeight;
        
     if (navigator.appName.indexOf("Microsoft")!=-1) {
      winW = document.body.offsetWidth;
      winH = document.body.offsetHeight;
     }
    
    if (winW<768) {
    document.write('<META HTTP-EQUIV="Refresh" CONTENT="1; URL=http://www.google.com/">')
    }
}
</script>

And change the <body> tag so it looks like this:

Code: Select all

<body onload="loadPage()">

Darryl

Mike Henson · #8 May 14th, 2006, 15:11

Thank you Darryl, I'll give it it try
Kind regards
Mike

ukgeoff · #9 May 15th, 2006, 11:17

Why are you taking this approach in the first place?

Better to use css and design you pages to work at whatever size the browser happens to be.

Also you don't then have the problem of maintaining more than one version of any particular page.

Mike Henson · #10 May 15th, 2006, 11:36

Thank you Darryl, you're right, this one does work.

Again many thanks for helping me solve the problem, hopefully I can return the favour one day.

Kind regards

Mike
(Thread closed)

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Resolution problem	A800	Web Page Design	3	Mar 11th, 2008 20:40
Loading specific flash movies for specific pages	koonkle	Flash & Multimedia Forum	3	May 22nd, 2007 17:23
ASP / ASP. Net Software Delivery Engineer - Oxford - Client-facing	Web JobBot	Job Opportunities	0	Feb 8th, 2007 16:40
How can I know the user's resolution	QuikFrozen	JavaScript Forum	5	Aug 9th, 2006 15:03
Resolution Fix	Udabar	JavaScript Forum	6	Apr 10th, 2006 02:23

		Webforumz.com > Main Forums > Program Your Website > JavaScript Forum
Resolution specific delivery