I have designed my page for a width of 480px and I wanted it to fit the width of the iPhone viewport, so I have tried these options but each of these options are not scaling the graphic to match the viewport width (despite the orientation). Can someone help me with the issue?
<meta name =“viewport” content =“initial-scale = 1.0” width=“480px”>
<meta name=“viewport” content=“width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;”/>
<meta name=“viewport” content=“width=device-width; initial-scale = 1.0” width=“480px”/>
Here is the pages HTML:
<html>
<head>
<title>Sign-Up</title>
<style type="text/css">
<!--
/* * {margin:0;padding:0;}
html,body {height: 100%;}
body {zoom:100%;} */
#page {width: 100%;min-width:100%;}
-->
</style>
<!--<meta name ="viewport" content ="initial-scale = 1.0" width="480px">-->
<!--<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>-->
<meta name="viewport" content="width=device-width; initial-scale = 1.0" width="480px"/>
</head>
<body>
<div id="page"><img src="pearl.jpg" /></div>
</body>
</html>
And here is a link to the live version of the page:
Quick Lane Club Sign-Up | Ray Varner Ford
