抓取屏幕分辨率并根据大小显示结果
[英]Grabbing screen resolution and displaying results based on the size
问题描述
我正在尝试根据屏幕分辨率大小显示数据库中的结果。 我在上周发布了一个关于如何获得宽度的问题，并且能够在这里借助一些想法来提出这个jquery，但是无法完成第二个方面，即根据大小显示结果：
<script type="text/javascript">
$(document).ready(function() {
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize = 1600) {
//**This is where I need to define the $maxresults value, but how?**
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
</script>
现在，这是第二部分：
<?php
// get the function
include_once ('function.php');
$maxresults = 21;
if ($_GET['page']) {
$page = $_GET['page'];
}
else {
$page = 0;
}
$currentpage = $page;
$page = $page*$maxresults;
$numpages = QuickQuery("SELECT COUNT(id) FROM books WHERE visible=1");
$numpages = mysql_result($numpages, 0);
$numpages = $numpages/$maxresults-1;
//Show <maxresults> pages at a time
$result = GetBooksByRangeID($page, $maxresults);
DisplayResults($result);
?>
要显示的最大结果数量设置为21，但我想使用上面的jquery根据用户的屏幕分辨率定义数量; 我会有各种尺寸。 换句话说，我需要if语句说“根据找到的大小显示这么多结果”。 那么如何编写if语句呢？
* 最后修订=部分工作，（尽管分辨率大小，但将所有结果设置为最大值6）*
<?php
// get the function
include_once ('function.php');
if(($_GET['w']) && ($_GET['h'])) {
$w = $_GET['w'];
$h = $_GET['h'];
}
if ($w == 1920) {
$maxresults = 24;
}
else if ($w == 1600) {
$maxresults = 24;
}
else if ($w == 1440){
$maxresults = 12;
}
else if ($w == 1366) {
$maxresults = 10;
}
else if ($w == 1024) {
$maxresults = 8;
}
else $maxresults = 6;
.....
3 个解决方案
解决方案1
1 已采纳 2013-02-25 15:36:36
使用Ajax，这是需要做的
<html><body>
<div id="content"></div>
....
<script>
$(function(){
$.ajax({
url: 'file.php',
type: 'GET',
data: {h: screen.height, w: screen.width}
}).done(function ( data ) {
document.getElementById("content").innerHTML=data;
});
});
</script>
那个file.php然后会运行你的数据库查询，并根据通过ajax发送的h和w参数返回一个格式很好的结果集（即html表），它告诉你屏幕的高度和宽度。 要做到这一点，只需根据$_GET['w']和$_GET['h']变量的大小设置$ page变量。 见下文：
<?php
// get the function
include_once ('function.php');
$maxresults = 21;
$page = ( $_GET['page'] ? $_GET['page'] : 0 );
if(($_GET['w']) && ($_GET['h'])) {
$w = $_GET['w'];
$h = $_GET['h'];
//$maxresults = // calculate this depending on w and h
// i.e. if h > 1600 $maxresults = 20, else = 10
$currentpage = $page;
$page = $page * $maxresults;
$numpages = QuickQuery("SELECT COUNT(id) FROM books WHERE visible=1");
$numpages = mysql_result($numpages, 0);
$numpages = $numpages/$maxresults-1;
$result = GetBooksByRangeID($page, $maxresults);//Show <maxresults> pages at a time
//DisplayResults($result);
echo $results; // in a nice format (i.e. table) to be inserted into div via ajax
?>
您可以按如下方式计算$ maxresults：
if($w > 640) && ($h > 480) $maxresults = 5;
if($w > 800) && ($h > 600) $maxresults = 7;
if($w > 1024) && ($h > 768) $maxresults = 12;
....
if($w > 2560) && ($h > 1600) $maxresults = 21;
或者你可以按宽度对这些语句进行分组（因为我认为这不比高度重要，这意味着对用户的向下滚动更少）：
if ($w <= 1024) {
if ($h >= 768) $maxresults = 12; // 1024x(768 or higher)
else if ($h >= 600) $maxresults = 8; // 1024x(600~768)
else $maxresults = 6; // 1024x(599 or below)
}
else if ($w <= 1280) {
if ($h >= 1024) $maxresults = 14; // 1280x(1024 or higher)
else if ($h >= 960) $maxresults = 12; // 1280x(960~1024)
else if ($h >= 800) $maxresults = 10; // 1280x(800~960)
else if ($h >= 768) $maxresults = 8; // 1280x(768~800)
else $maxresults = 6; // 1280x(768 or below)
}
//and so on
请参阅： http ： //en.wikipedia.org/wiki/Display_resolution#Computer_monitors
调整
填充maxresults的代码编写得非常糟糕，这就是为什么它不起作用。 尝试这个：
<?php
include_once ('function.php');
$maxresults = -1;
if(($_GET['w']) && ($_GET['h'])) {
$w = $_GET['w'];
$h = $_GET['h'];
if ($w == 1920) {
$maxresults = 24;
} else if ($w == 1600) {
$maxresults = 24;
} else if ($w == 1440){
$maxresults = 12;
} else if ($w == 1366) {
$maxresults = 10;
} else if ($w == 1024) {
$maxresults = 8;
} else
$maxresults = 6;
}
echo $maxresults;
如果w和h没有被发送，它将输出-1或者它将返回24或12，依此类推，具体取决于您的屏幕宽度。 学习对代码进行一些基本的调试。 我很难调试你的代码，而没有完全掌握它。
解决方案2
1 2013-02-25 15:37:10
只需通过de $_GET['windowsize']传递答案来加载ajax，并使用通过“data”变量返回的结果（这可以是插入DOM的HTML，也可以是json字符串或者你有什么想要它。
<script type="text/javascript">
$(document).ready(function() {
var $window = $(window);
function checkWidth() {
var windowsize = $window.width();
if (windowsize = 1600) {
$.ajax('/path/to/page?windowsize='+encodeURIComponent(windowsize)).done(function(data){
// the stuff to do when the php is loaded, for example, document.getElementById('x').innerHTML=data;
});
}
}
// Execute on load
checkWidth();
// Bind event listener
$(window).resize(checkWidth);
});
</script>
在PHP脚本中你可以发布：
<?php
$windowsize = (int)$_GET['windowsize'];
if($windowsize >= 1200 && $windowsize < 1400)
{
echo "maxsize:200;minsize:300;";
}
if($windowsize >= 1400 && $windowsize < 1600)
{
echo "maxsize:300;minsize:400;";
}
然后在javascript中你可以使用：
..........done(function(data) {
$results = data.split(';');
for(c=0;c<$results.length;c++)
{
$tmp = $results[c].split(':');
if($tmp[0] == 'minsize')
{
minsize=parseInt($tmp[1]);
}
if($tmp[0] == 'maxsize')
{
maxsize=parseInt($tmp[1]);
}
});
解决方案3
0 2013-02-25 15:24:46
一个快速的解决方案是将每个Ajax的屏幕分辨率提交到php脚本。 然后使用分辨率确定数量并返回电影，例如json。
像这样的东西：
**编辑
JavaScript的：
$(document).ready(function() {'use strict';
var screenResolution, request;
//set screen resolution here
screenResolution = 1024;
request = $.ajax({
url : "url_to_php_script",
type : "POST",
dataType : "json",
contentType : 'application/x-www-form-urlencoded; charset=UTF-8',
data : {
"screenResolution" : screenResolution
}
});
request.fail(function() {
alert("fail");
});
request.done(function(movies) {
console.log(movies);
});
});
PHP：
$screenResolution = $_POST['screenResolution'];
//DO your normal Stuff
$jsonResult= json_encode($result);
return $jsonResult;
根据在Javascript中检测到的屏幕分辨率重定向到PHP中的响应站点
[英]Redirecting to responsive site in PHP based on screen resolution detected in Javascript
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.