0

画面解像度のサイズに基づいてデータベースから結果を表示しようとしています。先週、幅を取得する方法について質問を投稿し、ここでいくつかのアイデアの助けを借りてこの jquery を思い付くことができましたが、サイズに基づいて結果を表示するという 2 番目の側面を完了することができませんでした。

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

さて、これは2番目の部分です：

<?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= 部分的に動作中 (解像度サイズに関係なく、すべての結果を最大 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

簡単な解決策の 1 つは、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 に答える