Joda Maki
Joda Maki

Reputation: 5869

Mobile Forms are Small

I have a mobile version of a webpage. All it has is a single form w/ two text boxes and one submit button.

But on the mobile browser, the form is tiny until you zoom in on it. How do you make a form look normal by default on a mobile browser?

Upvotes: 3

Views: 1966

Answers (3)

Dan
Dan

Reputation: 10351

With the meta viewport, I use the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />

This way, there is no restriction on the width, so it can adjust accordingly whether the user is using a mobile phone or an iPad (or other tablet device). I would only recommend using the user-scale=no if you are building a site specifically for mobile.

Upvotes: 6

nLL
nLL

Reputation: 5672

Is your Doctype mobile? Try using

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

so that phone's browser would know that page is designed for mobile phones

Upvotes: 1

George Johnston
George Johnston

Reputation: 32258

You will need to add the viewport meta tag to the HTML header. This will tell the browser that your page is suppose to be rendered into a certain aspect. e.g.

<meta name="viewport" content="width=240,user-scalable=no" />

Upvotes: 1

Related Questions