抓取屏幕分辨率并根据大小显示结果

Question

I'm trying to show results from a database based on screen resolution size. 我正在尝试根据屏幕分辨率大小显示数据库中的结果。 I posted a question last week about how to get the width and was able to come up with this jquery with the help of a few ideas here, but was unable to complete the second aspect, which is to display 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>

Now, this is the second part: 现在，这是第二部分：

<?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); 
?>

The max amount of results to show is set to 21, but I want to use the jquery above to define the amount based on a user's screen resolution; 要显示的最大结果数量设置为21，但我想使用上面的jquery根据用户的屏幕分辨率定义数量; I will have various sizes. 我会有各种尺寸。 In other words, I need the if statement to say "show this many results based on the size found." 换句话说，我需要if语句说“根据找到的大小显示这么多结果”。 So how do I write that if statement? 那么如何编写if语句呢？

* LAST REVISION= Partially WORKING, (sets all results to max 6 despite resolution size) * * 最后修订=部分工作，（尽管分辨率大小，但将所有结果设置为最大值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;

..... .....

Answer 1

Using Ajax, this is what needs to be done 使用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>

That file.php would then run your database query and return a nicely formatted set of results (ie html table) based on the h and w parameters sent via ajax which tell you the height and width of the screen. 那个file.php然后会运行你的数据库查询，并根据通过ajax发送的h和w参数返回一个格式很好的结果集（即html表），它告诉你屏幕的高度和宽度。 To do this just set the $page variable depending on the size of the $_GET['w'] and $_GET['h'] variables. 要做到这一点，只需根据$_GET['w']和$_GET['h']变量的大小设置$ page变量。 See below: 见下文：

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

You can calculate $maxresults as follows: 您可以按如下方式计算$ 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;

Or you can group these statements by width (as I think thats less important than height, meaning less scrolling down for the user): 或者你可以按宽度对这些语句进行分组（因为我认为这不比高度重要，这意味着对用户的向下滚动更少）：

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

see: http://en.wikipedia.org/wiki/Display_resolution#Computer_monitors 请参阅： http ： //en.wikipedia.org/wiki/Display_resolution#Computer_monitors

Revision 调整

You code for populating maxresults is very poorly written, thats why it does not work. 填充maxresults的代码编写得非常糟糕，这就是为什么它不起作用。 Try this: 尝试这个：

<?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;

This will either output -1 if w and h are not being sent or it will return 24 or 12 and so on depending on your screen width. 如果w和h没有被发送，它将输出-1或者它将返回24或12，依此类推，具体取决于您的屏幕宽度。 Learn to do some basic debugging on your code. 学习对代码进行一些基本的调试。 It is difficult for me to debug your code without having all of it to hand. 我很难调试你的代码，而没有完全掌握它。

Answer 2

Just load the ajax by passing the answer via de $_GET['windowsize'] and use the results that are returned via the "data" variable(this can be HTML that is inserted into the DOM but also an json string or what ever you want it to be. 只需通过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>

in the php script you could post: 在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;";
    }

then in the javascript you could use: 然后在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]);
            }
        });

Answer 3

One quick solution would be to submit the screen-resolution per Ajax to the php script. 一个快速的解决方案是将每个Ajax的屏幕分辨率提交到php脚本。 Then use the resolution to determine the amount and return the movies for example as json. 然后使用分辨率确定数量并返回电影，例如json。

Something like this: 像这样的东西：

**EDIT **编辑

javascript: 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: PHP：

$screenResolution = $_POST['screenResolution'];

//DO your normal Stuff

$jsonResult= json_encode($result);

return $jsonResult;

抓取屏幕分辨率并根据大小显示结果

问题描述

3 个解决方案

解决方案1
1 已采纳 2013-02-25 15:36:36

see: http://en.wikipedia.org/wiki/Display_resolution#Computer_monitors 请参阅： http ： //en.wikipedia.org/wiki/Display_resolution#Computer_monitors

解决方案2
1 2013-02-25 15:37:10

解决方案3
0 2013-02-25 15:24:46

抓取屏幕分辨率并根据大小显示结果

问题描述

3 个解决方案

解决方案1 1 已采纳 2013-02-25 15:36:36

see: http://en.wikipedia.org/wiki/Display_resolution#Computer_monitors 请参阅： http ： //en.wikipedia.org/wiki/Display_resolution#Computer_monitors

解决方案2 1 2013-02-25 15:37:10

解决方案3 0 2013-02-25 15:24:46

解决方案1
1 已采纳 2013-02-25 15:36:36

解决方案2
1 2013-02-25 15:37:10

解决方案3
0 2013-02-25 15:24:46