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

2024-01-15

我正在尝试根据屏幕分辨率大小显示数据库的结果。我上周发布了一个关于如何获取宽度的问题,并且能够在此处的一些想法的帮助下提出这个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 将运行您的数据库查询,并根据通过 ajax 发送的 h 和 w 参数返回一组格式良好的结果(即 html 表),这些参数告诉您屏幕的高度和宽度。为此,只需根据页面的大小设置 $page 变量即可$_GET['w'] and $_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

see: http://en.wikipedia.org/wiki/Display_resolution#Computer_monitors http://en.wikipedia.org/wiki/Display_resolution#Computer_monitors

Revision

您用于填充 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 等等,具体取决于您的屏幕宽度。学习对代码进行一些基本的调试。如果我没有掌握所有代码,我很难调试您的代码。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

抓取屏幕分辨率并根据大小显示结果 的相关文章

  • 如何使用 Laravel Eloquent 返回多重关系?

    我有一张桌子叫users 每个用户都有不同的事情 country device computer category 我为上述每一个 事物 创建了一个表格 类似如下 1 United States 2 United Kingdom 3 Aus
  • 使用 jquery 通配符检查 cookie 名称

    我有一个生成动态 cookie 的表单 例如 webform 62 1234356 62 1234356 可以是任意数字 我需要使用一些通配符检查来检查名称以 webform 开头的 cookie 是否存在 下面不起作用 if cookie
  • PHP 等级分类器 - 数组的问题[关闭]

    Closed 这个问题需要细节或清晰度 help closed questions 目前不接受答案 您好 我正在开发一个 docker 微服务等级检查器应用程序 我正在从 HttpRequest 获取用户输入 我缺乏一些关于数组的基本知识以
  • TCPDF UTF-8 符号未显示

    我使用最新的 TCPDF 版本 5 9 但在编码方面遇到一些奇怪的问题 我需要立陶宛语语言符号 例如 但只能得到其中的一小部分 其他的还是这样 所以我该怎么做 我使用默认的 times 字体 它带有 TCPDF 下载 任何帮助 将不胜感激
  • nodejs mocha suite 未定义错误

    我正在尝试使用摩卡运行一些测试 但似乎无法克服这个错误 E tdd nodejs cart gt mocha cart test js node js 201 throw e process nextTick error or err Re
  • 这种 JavaScript 编码风格有什么问题? (闭包与原型)

    我们一直在讨论如何最好地处理我们的 JS 应用程序中的对象 研究 Stoyan Stefanov 的书 阅读无数关于 新 这个 原型 闭包等的 SO 帖子 事实上有很多 而且它们有这么多相互竞争的理论 表明没有完全明显的答案 让我们假设我们
  • express 或express-generator:我需要两者吗?

    只是探索 Node js 并遇到了 Express 在 npm 存储库站点上https www npmjs com package express https www npmjs com package express它明确指出安装是 np
  • 如果多个键是相同的 JS,则对对象中的值求和

    例如我有 5 个对象 row aa col 1 value 1 row bb col 2 value 1 row bb col 3 value 1 row aa col 1 value 1 row aa col 2 value 1 我想对值
  • 显示表中的记录

    我的第一个 PHP 项目遇到了一些麻烦 我试图从 MySQL 数据库 有 3 条记录 获取数据并将其显示在表格中 问题是它似乎只显示记录 2 和 3 它跳过了第 1 条记录 请参阅我的代码并在下面显示 if mysqli connect e
  • 如何使用CSS将背景图像放入选择选项标签中

    我有一个从 json 响应接收的国家 地区下拉列表 并且想要在国家 地区名称旁边添加相应的国家 地区国旗图标 也从 json 响应获取图像 我已经尝试了不同的 jQuery 和 bootstrap 插件 但他们所做的是破坏我以前的选择框样式
  • Sequelize.js - “不关联到”

    我在从数据库获取完整数据时遇到一些问题 那是我的模型 User module exports function sequelize DataTypes return sequelize define user id type DataTyp
  • 当条件评估为 true 时获取元素(扩展 ElementArrayFinder)

    我们有一个菜单 表示为ul gt li列表 简化 ul class dropdown menu li class ng scope a href class ng binding Menu Item 1 a li li li ul
  • 如何在 Python 中包含 PHP 脚本?

    我有一个 PHP 脚本 news generator php 当我包含它时 它会抓取一堆新闻项并打印它们 现在 我在我的网站 CGI 中使用 Python 当我使用 PHP 时 我在 新闻 页面上使用了这样的内容 为了简单起见 我删掉了这个
  • 使用本机 JavaScript 获取过渡中的 CSS 值

    这个问题之前被问过 但答案使用了 jQuery here https stackoverflow com q 8920934 3186555 因此 我将调整问题以专门询问native解决方案 to 最小化依赖关系 假设您有一个 div 然后
  • PHP - Filter_var 替代方案?

    我构建了一个 php 脚本来输出以表单形式发布的数据 但遇到了问题 网站将运行的服务器运行 PHP 5 1 6 此版本的 PHP 不支持 filter var 我需要知道短期内的替代方案 最好是昨天 但在 Google 或 Stack Ov
  • jQuery 检索和设置 html select 元素的选定选项值

    我正在尝试使用 jQuery 检索并设置选择元素 下拉列表 的选定值 为了检索我已经尝试过 myId find selected val 也 myId val 但两者都返回未定义 任何对此问题的见解将不胜感激 要获取 设置选择元素的实际 s
  • 通过多个回调优雅地传递“点击事件”

    当未登录的用户单击给定的按钮时 我想停止该事件 收集他的 oauth 收集他的电子邮件 如果我没有 然后执行该事件 我想用 javascript 来做所有事情 因为这会让事情变得更加简单 这就是我执行它的方式 我有两个问题 有没有更优雅的方
  • 更改javascript nodejs中所有页面的href url

    我已经实现了具有多种语言下拉菜单的引导导航栏 当我选择语言时 它将翻译页面 如何更改其他页面的 url 和按钮文本 当我选择french 将所有网址更改为 fr about and fr contact 如何使用 JavaScript 进行
  • 使用 javascript Array reduce() 方法有什么真正的好处吗?

    reduce 方法的大多数用例都可以使用 for 循环轻松重写 对 JSPerf 的测试表明 reduce 通常会慢 60 75 具体取决于每次迭代内执行的操作 除了能够以 函数式风格 编写代码之外 还有什么真正的理由使用reduce 吗
  • 利用重力效果拖动元素

    我想完成类似于 photoshop com 和此网站的功能 http mrdoob com projects chromeexperiments google gravity http mrdoob com projects chromee

随机推荐

  • 如何在 Scala 中进行转换?

    例如假设我有 val myDouble 25 7 val myInt 5 我会怎么做类似的事情 val divide Int myDouble myInt 你可以做 myDouble myInt toInt 你也可以做toDouble to
  • tensorflow:reshape()可以创建副本吗?

    在他们的 API v4 中 torch 引入了reshape 更加符合 numpy 的风格 以前 改变火炬张量的形状是通过view 我想知道是否view 现在将被弃用并查看docs https pytorch org docs stable
  • 如何更新 Google Drive v3 PHP 中的文件

    我似乎无法使用以下代码更新谷歌驱动器中的文件 一切正常 但文件保持不变 我正在使用 v3 api function updateFile service fileId data try emptyFile new Google Servic
  • 将类应用于 br 标签? [复制]

    这个问题在这里已经有答案了 以下是有效的 HTML 吗 br class something 作为一个 HTML 元素 我不明白为什么它不会 但我认为我从未见过它被使用 Yes See 规格 https www w3 org TR html
  • tkinter 中的按钮命令选项

    在下面的小 GUI 应用程序中 当我使用按钮的命令选项来调用函数时 它不是这样工作的 self update 相反 它的工作原理如下 self update 为什么这样 按钮的命令选项是否有某种特殊的工作方式 我认为应该用这些大括号调用方法
  • 一些 Express.Router() 路由不执行中间件函数

    我正在尝试解决 Express router 的实现问题 而不是触发分配给它的中间件函数 我编写了一个相当大的应用程序 并尝试向我的路径添加更多端点 但由于某种原因 第 9 条路线被加载但没有触发该功能 app js server use
  • 将图像放置在居中的 div 后面

    我的网站有 900px div content以margin left auto and margin right auto 我有一个图像需要在 div 后面显示 该图像将部分重叠 content 图像目前设置为显示为块 我可以将其到达需要
  • Bootstrap 轮播可以仅旋转部分幻灯片吗?

    我有一个直接来自引导站点的香草轮播 carousel carousel interval 2000 它有 5 张幻灯片和 5 个指标 1 2 3 A B 我希望轮播能够自动循环播放幻灯片 1 2 和 3 然后重复 但是 如果我单击幻灯片 A
  • 无法让 JQuery 在母版页中工作

    我有一个没有母版页的表单中的示例 jquery 它工作正常 我试图在我的母版页中使用相同的功能 但它不起作用 我正在使用 ASP NET 这是我的代码 WebForm 这有效
  • 为什么要让用户在 PayuMoney 网关的 android SDK 中登录?

    我正在尝试集成适用于 Android 的 PayUMoney SDK 并成功将 SDK 添加到我的应用程序中 当用户单击支付按钮时 将打开登录页面 为什么要让用户登录 创建 payu 帐户 一旦用户按下支付按钮 支付选项就会打开 但事实并非
  • NSPredicate 中 ALL 、 ANY 和 SOME 运算符之间的区别

    我真的很难理解这 3 个 看起来像ANY and SOME做同样的事情 但我看不出有什么区别ALL 让我们有一个组列表 每个团体都有人类型的成员 每个人都有一个年龄 所有会员年龄 gt 30 意味着您将找到一个成员全部年龄超过 30 岁的群
  • Django unique_together 与可为空的外键

    我在使用 Sqlite 的开发机器中使用 Django 1 8 4 并且有以下模型 class ModelA Model field a CharField verbose name a max length 20 field b Char
  • 搜索自然语言句子结构

    存储和搜索自然语言句子结构树数据库的最佳方式是什么 Using OpenNLP 的 http incubator apache org opennlp 英语树库解析器 我可以对任意句子进行相当可靠的句子结构解析 我想做的是创建一个工具 可以
  • UserProfile 状态在 bot v4 中的用户之间保持不变

    当我有两个机器人实例时 如果我将机器人部署到 Azure 则可以是两个模拟器窗口或两个浏览器 输入的第一个名称对于所有其他实例都是持久的 实例一 https i stack imgur com WsPw7 jpg https i stack
  • 将spawn()的stdout/stderr重定向到Ruby中的字符串

    我想使用spawn 对于多个并发子进程 在Ruby 中执行外部进程 并将stdout 或stderr 收集到一个字符串中 这与使用Python 的子进程Popen communicate 可以完成的方式类似 我尝试将 out err 重定向
  • ReadableByteChannelImpl 如何处理中断

    我正在尝试使用Channels newChannel包装输入流以支持中断 我看到了关于这是否有效的相互矛盾的信息 包括 ReadableByteChannelImpl 中的注释 Not really interruptible In Rea
  • 带有字符串键的 Lua 表不能使用数字索引?

    我是 Lua 的初学者 我认为使用字符串键将值推送到表中也会自动执行数字索引 但我认为我错了 我的代码 local t t name John t age 30 print Name t name nAge t age 虽然这段代码运行良好
  • 使用 css 3d 转换后如何修复 Safari 5 Mac OS X 中的脆文本?

    当应用 css 3d 变换的元素之后 相对和绝对定位的元素触发奇怪的行为时 我遇到了问题 为了解决这个问题 我必须设置背景颜色 但是如果我需要透明度怎么办 这是重现该错误的最低限度 http jsfiddle net 8VABq 3 htt
  • 如何获取 DD-MM-YYYY 格式的日期

    我正在使用 Parse 数据库 我存储日期格式 使用控制台时我得到这种格式 Tue Jul 18 2017 15 46 47 GMT 0100 CET 我想获得这种格式 18 07 2017 有什么想法请 可以使用以下代码来完成 let t
  • 抓取屏幕分辨率并根据大小显示结果

    我正在尝试根据屏幕分辨率大小显示数据库的结果 我上周发布了一个关于如何获取宽度的问题 并且能够在此处的一些想法的帮助下提出这个jquery 但无法完成第二个方面 即根据大小显示结果