0

so on my registration .php screen, i have a form in that phone a table, in the table there is 2 columns and about 5 rows the table basically set out like this ...

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

So that's the original form, on the larger screen so I'm using Bootstrap v3.1.1, so it has responsive web desgin built in, but when i use a tablet and smartphone, i just cant work out how to get the form to appear in a specific way, in a perfect situation, i would get rid of the table, and have just the form. id have each input field on a single line, then a <br> and where i have the verifiers, to check if the username is already in the system, if the email is currently registered part of the db, and if the password is at a decent strength to avoid people accessing your account. So the verifiers sit in the same line as the input field with just a space between them.

an ideal situation for me would be as simple as...

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

but im guessing it wont be as easy as that, does anyone have any suggestions that could help with this??

Oriol
  • 274,082
  • 63
  • 437
  • 513
GillNewlove
  • 1
  • 2
  • It's pretty much as easy as that. Check out css3 media queries. For javascript, modernizr.touch test. – Christopher Marshall Mar 23 '14 at 00:22
  • i sort of know about media queries and using them in .css files but can you basically do as i put, call them in a if statement if the screen is less than this size do this, or if screen is less than that do that – GillNewlove Mar 23 '14 at 00:41
  • 1
    @GillNewlove That is pretty much what media queries are. You can use them inline if you want, but it is generally better to use them in a separate file. Refer to this: http://stackoverflow.com/questions/12906913/can-i-use-a-media-query-in-inline-css-and-will-it-avoid-loading-the-background – 9997 Mar 23 '14 at 02:16

1 Answers1

2

PHP does not have a way of detecting screen size. It is a server side language only. However, you could do what you want in JavaScript. If the screen is a certain size, show one form and hide the other, and vice versa.

JavaScript example:

var browserWidth = window.innerWidth;

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

If you don't want to use JavaScript, you can use media queries.

Here is a great explanation / tutorial:

This is what a CSS media query would look like:

/*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)*/
}

Hope this helps.

KevBot
  • 17,900
  • 5
  • 50
  • 68