Question

我已经为1024,768和320宽度完成了3个单独的页面。有没有办法根据屏幕分辨率将访问者发送到正确的页面？

我没有构建响应式网站的原因是它包含一个不会调整正确比例的媒体播放器：（

提前致谢:) /阿克塞尔

Answer 1

使用Window.Screen对象查找浏览器窗口大小的高度和宽度。你应该这样做，

<!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>

Answer 2

// 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");
}

Answer 3

您可以使用javascript构建html页面，使用以下javascript代码获取用户设备屏幕分辨率：

window.screen.availHeight
window.screen.availWidth

并重定向到正确的广播或页面。

根据窗口大小将访问者发送到不同的页面

3 个答案: