抓取屏幕分辨率並根據大小顯示結果
[英]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.