0

我正在尝试根据屏幕分辨率大小显示来自数据库的结果。上周我发布了一个关于如何获取宽度的问题，并且能够在此处的一些想法的帮助下提出这个 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 语句呢？

* LAST REVISION= Partially WORKING，（将所有结果设置为最大 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;

......

4

3 回答 3

1

使用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']和变量的大小设置 $page$_GET['h']变量。见下文：

<?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，依此类推，具体取决于您的屏幕宽度。学习对您的代码进行一些基本的调试。我很难在没有所有代码的情况下调试您的代码。

于 2013-02-25T15:36:36.190 回答
1

只需通过 de 传递答案来加载 ajax$_GET['windowsize']并使用通过“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]);
            }
        });
于 2013-02-25T15:37:10.800 回答
0

一种快速的解决方案是将每个 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;
于 2013-02-25T15:24:46.183 回答