我可以根据屏幕尺寸制作不同的表格吗？答案

【问题标题】：can i make different forms appear dependent on what the screen size is?我可以根据屏幕尺寸制作不同的表格吗？
【发布时间】：2014-04-30 09:30:18
【问题描述】：

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

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

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

对我来说，理想的情况就是......

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

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

【问题讨论】：

就这么简单。查看 css3 媒体查询。对于 javascript，modernizr.touch 测试。
我有点了解媒体查询并在 .css 文件中使用它们，但你基本上可以按照我说的做吗，如果屏幕小于这个大小，请在 if 语句中调用它们，或者如果屏幕小于那个
@GillNewlove 这几乎就是媒体查询。如果需要，您可以内联使用它们，但通常最好在单独的文件中使用它们。参考这个：stackoverflow.com/questions/12906913/…

标签： php forms css twitter-bootstrap

【解决方案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)*/
}

希望这会有所帮助。

【讨论】：