Захват разрешения экрана и отображение результатов на основе размера

Я пытаюсь показать результаты из базы данных на основе размера разрешения экрана. На прошлой неделе я опубликовал вопрос о том, как получить ширину, и смог придумать этот 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; 

…..

Используя 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 выполнит ваш запрос к базе данных и вернет хорошо отформатированный набор результатов (т. Е. Таблицу html) на основе параметров h и w, отправленных через ajax, которые расскажут вам о высоте и ширине экрана. Для этого просто установите переменную $ page в зависимости от размера переменных $_GET['w'] и $_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 // ie 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 (ie 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

пересмотр

Код для заполнения максимальных результатов очень плохо написан, поэтому он не работает. Попробуй это:

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

Это будет либо выводить -1, если w и h не отправляются, либо он вернет 24 или 12 и так далее в зависимости от ширины экрана. Научитесь выполнять базовую отладку кода. Мне сложно отлаживать ваш код, не имея при этом всего этого.

Просто загрузите ajax, передав ответ через de $_GET['windowsize'] и используйте результаты, которые возвращаются через переменную «data» (это может быть HTML, который вставляется в DOM, а также строку 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]); } }); 

Одним из быстрых решений было бы представить разрешение экрана на 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;