Question

我是Phonegap新手并制作应用程序，但我的index.html和其他html文件不适合作为Android应用程序的移动视图。如何设置所有这些网页以适应移动屏幕，看起来像移动应用程序。

以下是我的示例代码：

 <!DOCTYPE html>
 <html>
 <body>

 <div id="container" style="width:500px">

 <div id="header" style="background-color:#FFA500;">
 <h1 style="margin-bottom:0;">Main Title of Web Page</h1></div>

 <div id="menu" style="background-color:#FFD700;height:200px;width:100px;float:left;">
 <b>Menu</b><br>
 HTML<br>
 CSS<br>
 JavaScript</div>

 <div id="content" style="background-color:#EEEEEE;height:200px;width:400px;float:left;">
 Content goes here</div>



 </div>

 </body>
 </html>

Answer 1

我认为你缺少视口。

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

用户可扩展 - 控制用户是否可以＆＃34;捏合缩放＆＃34;。

宽度 - 视口的宽度。

更多信息： referencelink1，referencelink2

Answer 2

不完全熟悉Phonegap，但我认为webview仍然需要视口元标记才能捕捉到设备宽度。

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

Answer 3

使用此

<meta name="viewport" content="width=device-width, min-width=device-width, initial-scale=1,  maximun-scale=1, user-scalability=0">

HTML Code index.html设计不适合Phonegap Android应用程序的移动视图？

3 个答案: