How to make text & text boxes appear bigger in mobile sites

Question

I'm new to developing mobile sites and I'm having a problem where text and textboxes and dropdownlists are appearing too small on the screen. What is the correct way to make these appear bigger?

Thanks.

Answer 1

I think this is what I wanted

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

This sets the width to device width so that on load the page and its elements appears larger.

Answer 2

Not sure if you're looking for a similar answer, but the following will ensure that when the screen width is maximum 480 px (eg. iPhone), then it will change the width and height of specific input-type elements. Change it according to your needs.

@media (max-width:480px) { /* change depending on the mobiles you're targeting */
    input, select { /* add further tags here according to your needs */
        height:300px;
        width:300px
    }
}