CODEWITHSUNDEEP
javascriptjquerycssresponsive-design
GetGalax
GetGalax

Reputation: 149

Sending visitor to different page depending on window size

I've done 3 separate pages for 1024, 768 and 320 width. Is there a way to send the visitor to the correct page depending on his screen resolution?

The reason I'm not building a responsive site is that it contains a Media Player that wont adapt the correct ratio :(

Thanks in advance :) /Axel

Upvotes: 0

Views: 407

Answers (3)

Afzal Ahmad
Afzal Ahmad

Reputation: 626

Use Window.Screen object to find out the height and width of Browser's window size. You should do like this,

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">       
</script>‌​
<script type="text/javascript">
var width = screen.availWidth;
//Now before comparison be sure you have only integer value
width = parseInt(width.toString());
var path='';
$(function(){
 if(width <= 320) 
 {
    path = "./320.html";
    loadWindow(path); 
  }
  else if (width > 320 && width <= 768) 
 {
   path = "./768.html";
   loadWindow(path); 
 }
 else if (width > 768 && width <= 1024) 
 {
   path = "./1024.html";
   loadWindow(path); 
  }
  else
  {
    path = "./1278.html";
    loadWindow(path); 
  }
});

//here is your loading function
function loadWindow(path)
{ 
   window.location.href = path;
}
</script>
</head>

<body>
</body>
</html>

Upvotes: 1

user3365207
user3365207

Reputation: 235

// Returns width of browser viewport
var width = $( window ).width();

if(width <= 320) {
$(document).load("./320.html");
}
else if (width > 320 && width <= 768) {
$(document).load("./768.html");
}
else if (width > 768 && width <= 1024) {
$(document).load("./1024.html");
}

Upvotes: 0

Stiekel
Stiekel

Reputation: 102

You can build a html page with javascript, get the user device screen resolution with the follow javascript code:

window.screen.availHeight
window.screen.availWidth

and redirect to the correct radio or page.

Upvotes: 0

Related Questions