Question

所以在我的注册.php屏幕上，我在那个手机中有一个表格，表格中有2列，大约5行，表格基本上就是这样......

| First Name | Last Name |
|  Username  | verifier* |
|  Password  | Verifier* |
| Retype Pass| Verifier* |
|    City    |  Country  |
|GenderSelect|DateOfBirth|
|  ClearBtn  | SubmitBtn |

所以这是原始的形式，在更大的屏幕上，所以我使用Bootstrap v3.1.1，所以它内置了响应式网页设计，但当我使用平板电脑和智能手机时，我只是无法弄清楚如何获得表格以特定的方式出现，在完美的情况下，我会摆脱桌子，只有form。 id在一行中有每个input字段，然后是<br>并且我有验证者，以检查用户名是否已经在系统中，如果电子邮件当前已注册为数据库的一部分，如果密码具有相当的强度，以避免人们访问您的帐户。因此，验证器与输入字段位于同一行，只有它们之间的空格。

对我来说理想的情况就像......一样简单。

if (screen size is < x && > y) {
    include 'includes/reg/form1';
}
if (screen size is < y) {
    include 'includes/reg/form2';
}

但我猜它不会那么容易，有没有人有任何建议可以帮助解决这个问题？

Answer 1

PHP无法检测屏幕大小。它只是一种服务器端语言。但是，您可以在JavaScript中执行所需的操作。如果屏幕是特定大小，则显示一个表单并隐藏另一个表单，反之亦然。

JavaScript示例：

var browserWidth = window.innerWidth;

if (browserWidth < x && browserWidth > y) {
    //Show this form
}
else if (browserWidth < y) {
    //show this form
}

如果您不想使用JavaScript，可以使用媒体查询。

这是一个很棒的explanation / tutorial:

这就是CSS媒体查询的样子：

/*CSS Media Query for a tablet device*/
@media only screen and (min-width:481px) and (max-width:768px) {
    /*CSS specific for tablets goes here (show the tablet form)*/
}

/*CSS Media Query for a mobile phone*/
@media only screen and (max-width:481px) {
    /*CSS specific for mobile phones goes here (show the mobile form)*/
}

希望这有帮助。

我可以根据屏幕尺寸显示不同的表格吗？

1 个答案: