Question

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

请在此处查看1图像:(将其复制并粘贴到新浏览器中以查看图像。）

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

以上图片是Android设备的默认网络浏览器。我在默认浏览器中打开了一个网页。您将看到付款div小于实际设备屏幕大小，并以此方式自行调整。

现在在这里看到2图像:(将其复制并粘贴到新浏览器中以查看图像。）

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

上面的图片是Android设备的Google Chrome网络浏览器。我在Google Chrome浏览器中打开了一个网页。您将看到付款div占用整个设备屏幕大小并以此方式自行调整。我认为这里所做的是GWT（Google Web Toolkit）渲染收到的html，并通过识别实际的html小于设备屏幕宽度并隐式地将其拉伸到设备屏幕并丢弃空填充来有效地渲染它。 / p>

现在我正面临着我的手机问题。下面是我在设备中运行的应用程序的屏幕截图。请参阅下面的3图像:(将其复制并粘贴到新浏览器中以查看图像。）

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

这里做了什么？电话间隙呈现收到的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>

Answer 1

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

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

Answer 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" />

似乎是＆＃34;缩小＆＃34;正如你所描述的那样。

要解决此问题，请在我的项目中使用此meta标记：

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

如何在phonegap中获取Google Chrome浏览器？

2 个答案: