Automatically zoom web page on iphone/android so text box fills screen horizontally

StackOverflow https://stackoverflow.com/questions/14405035

Question

We have a large proprietary MRP system based on 4D.

We are creating a very simple web page served by 4D that has a text box.

How do I convince iphones and androids to make the text box the width of the screen, so the user does not have to manually zoom?

<!DOCTYPE html>
<HTML>
<HEAD>
<style type="text/css">
</style>
</HEAD>
<META NAME="GENERATOR" CONTENT="4th Dimension - 4D">
<TITLE> Real Time Collection
</TITLE>

<BODY>
<FONT size="5";bold>    
<FORM ACTION="/ProcessJobHours" METHOD=POST>
    Employee ID#<BR>
    <INPUT TYPE=TEXT NAME=Emp VALUE="" style="height: 48px; width: 250px;
                    font-size: 24pt;"><BR>      
    <!-- OK is a particular case-->
    <INPUT TYPE=SUBMIT NAME=WEBOK VALUE="Ok">
</FORM>
</BODY>
</HTML>

What I get is: enter image description here

What I want is: enter image description here

Was it helpful?

Solution

I think the viewport suggestion by Alex B is a good start. Try adding this to your the section of your HTML.

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

OTHER TIPS

I believe what you are looking for on mobile rendering of a web page is called viewport. I think this blogpost clarifies it fairly well.

http://bravenewmethod.wordpress.com/2011/08/28/html5-canvas-layout-and-mobile-devices/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top