Automatically resize HTML buttons based onscreen size?

Question

I am making an android mobile app using HTML and JavaScript with CSS. The problem is, I sent it to my friend to test, and the buttons are tiny on his screen. Using CSS, I changed the button size by changing text size in CSS. Is there a way that I could have the button size change automatically so that it is proportional to the screen size? If not, how would I make the buttons bigger for larger screens, and smaller for smaller screens?

Please note: I am only using HTML, JavaScript, and CSS. If you give me anything else, please mane it possible to copy and paste because I will not know how to incorporate it in my code.

Answer 1

It sounds like you want a 'responsive' design, use media-queries and 'breakpoints'.

The breakpoints will be the width for each device you want to support.

• for an iphone 5 you would use '641px' as the max width.

• you first define the standard class. Then deviate from that using the media queries with css like so

#button{
     width:100%;         // first define your class
    }

   @media (max-width: 640px) {
      #button {
         width:50%;
      }
    }

http://iosdesign.ivomynttinen.com

Answer 2

It probably be done by adding this tag in header

<meta name="viewport" content="width=device-width" />

or/and setting width in percentage.

ex.

  <input type="text" style="width:30%" />

Answer 3

You need to use the meta tag for responsive:

<meta name="viewport" content="initial-scale=1, maximum-scale=1">

The HTML:

<input type="submit" name="" class="my_button"/>

The CSS:

input.my_button{
     width:50%;
     height:32px;
     display:table;
     margin:0 auto;
}
@media screen and (max-width:360px){
     input.my_button{
          width:100%;
     }
}