Question

我有一个PHP站点，该站点与SQL数据库连接。数据库显示在页面上的表格中（请参见下面的代码）。

<?php
require "connect.php";

$query = "SELECT * FROM table";

$res = mysqli_query($db, $query);

echo '<table border=1>';
while ($line = mysqli_fetch_assoc($res)) {
  echo "<tr>";
  echo "<td>". $line['date'] . "</td>";
  echo "<td>". $line['team1'] . "</td>";
  echo "<td>". $line['team2'] . "</td>";
  echo "<td>". $line['result'] . "</td>";
  echo "</tr>";
}
echo "</table>";
?>

如果您在计算机上打开网站，该表看起来会很好，但是如果您在手机上打开它，则该表太大（必须有很多列），可以完全显示而无需滚动。因此，如果您在手机上打开页面，我想过一种新的结构，但是我不想有两个不同的文档，只有一个。我还不确定移动结构会是什么样子，但目前并不重要。我的问题是：识别设备是计算机还是电话的最佳方法是什么？一种方法是使用JavaScript找出设备的宽度，然后根据识别出的宽度执行正确的PHP代码。看起来像这样：

var width = screen.width;
if (width > 1000) {
   document.write("<?php either this ?>");
}
else {
   document.write("<?php or this ?>");
}

另一种方法是将屏幕的宽度输出为隐藏的输入形式。然后，PHP可以将该值存储在变量中，并根据该值执行正确的PHP代码。因此，与方法2的区别在于，我使用的是PHP-if-command，而不是JavaScript-if-command。

Answer 1

一种可能的方式：将div标记用于类而不是table，tr和td，然后通过CSS将表属性应用于它们，然后创建一个或更多个媒体查询，这些查询用常规的块元素替换了类似表格的CSS，从而使表格单元格彼此之间排成一行：

（注意：使用“扩展代码段”，然后将窗口拖动到宽度小于600像素以查看代码段中的结果。该代码段不包含任何PHP，而是包含已解析的HTML代码的示例）

.table {
  display: table;
  width: 100%;
  border-collapse: collapse;
}

.row {
  display: table-row;
}

.cell {
  display: table-cell;
  padding: 4px 8px;
  border: 1px solid #ccc;
}

@media screen and (max-width: 600px) {
  .table, .row, .cell {
    display: block;
  }
  .cell:not(:last-child) {
  border-bottom: none;
}

<div class="table">
  <div class="row">
    <div class="cell"> date1 </div>
    <div class="cell"> team1 </div>
    <div class="cell"> team2 </div>
    <div class="cell"> result1 </div>
  </div>
   <div class="row">
    <div class="cell"> date2 </div>
    <div class="cell"> team3 </div>
    <div class="cell"> team4 </div>
    <div class="cell"> result2 </div>
  </div>
   <div class="row">
    <div class="cell"> date3 </div>
    <div class="cell"> team5 </div>
    <div class="cell"> team6 </div>
    <div class="cell"> result3 </div>
  </div>
</div>

使PHP生成的表具有响应性的最佳方法是什么？

1 个答案: