如何在 phonegap 中获得类似视图的 Google chrome 浏览器？答案

【问题标题】：How can I get the Google chrome browser like view in phonegap?如何在 phonegap 中获得类似视图的 Google chrome 浏览器？
【发布时间】：2014-04-08 10:51:57
【问题描述】：

我正在开发一个电话间隙应用程序。 Phone-gap 使用 HTML 5、CSS 3 和 java 脚本在设备的默认 Web 套件中呈现 html。该应用程序的场景是它在我们的应用程序页面视图的 IFrame 中显示第三方的网页。在解释问题之前，我想在这里演示一个示例。

在此处查看 1 张图片：（将其复制并粘贴到新浏览器中以查看图片。）

  https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042400/1.png?1396949391

上图是安卓设备的默认浏览器。我在默认浏览器中打开了一个网页。你会看到payment div比实际设备屏幕尺寸要小，这样就可以自行调整了。

现在在这里看到2张图片：（复制并粘贴到新浏览器中查看图片。）

 https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042401/2.png?1396949638

上图是安卓设备的谷歌Chrome浏览器。我在 Google Chrome 浏览器中打开了一个网页。您会看到支付 div 占据了整个设备的屏幕大小，并以这种方式自行调整。我认为这里所做的是 GWT(Google Web Toolkit) 渲染接收到的 html 并通过识别实际 html 小于设备屏幕宽度并将其隐式拉伸到设备屏幕并丢弃空填充来有效地渲染它。

现在我正在解决我的电话间隙问题。下面是在设备中运行的我的应用程序的屏幕截图。请看下面的3张图片：（复制并粘贴到新浏览器中查看图片。）

 href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042403/3.png?1396949903

这里做了什么？ phone-gap 渲染接收到的 html 并借助 android 设备的本机 Web 工具包（因为此应用程序目前正在 android 上测试）。您可以看到接收到的 html div 小于实际屏幕尺寸（可能与图 1 相同）。它没有提供移动应用程序的正确外观。我怎样才能使（图 3）接收到的 html 可以拉伸到设备屏幕的全尺寸。我编辑了一张图片来说明我真正想要的。下图是我的要求。
这是第 4 张图片（不是实际的快照，但它是必需的）：

href="https://d2r1vs3d9006ap.cloudfront.net/s3_images/1042406/4.png?1396950380

请帮助我如何在 phonegap 中获得类似 Google chrome 浏览器的视图？

编辑 1：

这是我的 index.html 文件代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
    <link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">
    <link rel="stylesheet" type="text/css" href="css/index.css" />
    <style> 
        .header{
            display:inline-block;
            text-align:center;
            width:100%;
            height:100px;
            background: #203864; !important;
        }   
    </style>
    <script src="js/myjs/jquery.js"></script>
    <script src="js/myjs/jquery.mobile-1.2.0.js"></script>

    <script>
        function fixiFrame () {
            $("#formframe").width($(window).width()  );
            $("#formframe").height($(window).height() * 0.83 | 0 );

        }
    </script>

        <title>My Test App</title>
    </head>
    <body>
    <div data-role="page" id="main" >
        <div data-role="header" class="header" >
            <a href="#" data-role="button" data-icon="back"  class="ui-btn-right" data-transition="slide" onclick="formHomeButtonClick()">Home</a>
        </div>
        <div id="iFrameDiv" > 
            <iframe id="formframe" width="100" height="650" src="form.html" onLoad='fixiFrame();' frameborder="0" ></iframe>  
        </div>
    </div>


    <script type="text/javascript" src="phonegap.js"></script>  
    <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
            app.initialize();
        navigator.splashscreen.show();
        </script>
    </body>
</html>

这是 form.html 文件代码：

<!DOCTYPE html>
<html>

 <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
         <meta name="viewport" 
        content="user-scalable=yes, 
        initial-scale=0.5, 
        maximum-scale=0.5, 
        minimum-scale=0.5, 
        width=device-width, 
        height=device-height, 
        target-densitydpi=250" 
    />

    <link rel="stylesheet" href="css/mycss/themes/default/jquery.mobile-1.2.0.css">

    <script src="js/myjs/jquery.js"></script>
    <script src="js/myjs/jquery.mobile-1.2.0.js"></script>
 </head>

<body >
    <div data-role="page" id="billPage"><br>
        Please Enter the Customer Billing Details
        <form id="billForm" method="POST" action="https://ipg.comtrust.ae/SPIless/Registration.aspx" >
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="OrderID"> Account Number: </label>
                <input type="text" name="OrderID" id="OrderID" value="" placeholder="Account Number"/>
            </div>
            <div data-role="fieldcontain" class="ui-hide-label">
                <label for="Amount"> Billing Amount (USD):</label>
                <input type="text" name="Amount" id="Amount" value="" placeholder="Billing Amount (AED)" />
            </div>
            <input type="hidden" name="OrderName" value="Pizza-Grill" />
            <input type="hidden" name="Currency" value="USD" />
            <input type="hidden" name="Customer" value="Online" />
            <input type="hidden" name="Language" value="en" />
            <input type="submit" data-inline="true" data-transition="pop" value="Continue" id="submitButton" onclick="return checkform();" />   
        </form> 
    </div>
</body>
</html>

【问题讨论】：

标签： android html css google-chrome cordova

【解决方案1】：

如果您为您放在这里的快照提供一些代码（源代码），那么对您的帮助会容易得多。无论如何，页面似乎有一个固定的宽度，所以两个应用程序（默认浏览器和 android 的 chrome）之间的唯一区别是默认缩放设置，它在 chrome 上设置为适合页面的宽度。

所以你的问题可能会有类似的答案：How to set the initial zoom/width for a webview

【讨论】：

您好，亲爱的。此链接中彻底解释了相同的问题。 link

【解决方案2】：

您的问题似乎与this question/answer 有关。

问题源于视口meta 标签。由于您没有向我们提供任何代码，我将假设您的 meta 标签是错误的。

很多教程都以meta标签开头：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

正如您所描述的，这似乎是“缩小”。

为了解决这个问题，在我的项目中，我使用了这个meta 标签：

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

【讨论】：

谢谢。但是我已经尝试过这个视口来缩小我的页面，但它并没有解决问题。