Fatal编程技术网
  • android/
  • Android 如何在phonegap中获得类似Google chrome浏览器的视图？

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

android html css google-chrome cordova

Android 如何在phonegap中获得类似Google chrome浏览器的视图？,android,html,css,google-chrome,cordova,Android,Html,Css,Google Chrome,Cordova,我正在开发一个电话gap应用程序。Phone gap使用HTML5、CSS 3和java脚本在设备的默认web工具包中呈现HTML。应用程序的场景是在我们的应用程序页面视图的IFrame中显示第三方的网页。 在解释问题之前，我想在这里演示一个示例 请参见此处的1图像：（复制并粘贴到新浏览器中以查看图像。） 上图是android设备的默认web浏览器。我已在默认浏览器中打开网页。您将看到支付div小于实际设备屏幕大小，并以这种方式自行调整 现在在此处查看2个图像：（复制并粘贴到新浏览器中以查看图像

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

请参见此处的1图像：（复制并粘贴到新浏览器中以查看图像。）

上图是android设备的默认web浏览器。我已在默认浏览器中打开网页。您将看到支付div小于实际设备屏幕大小，并以这种方式自行调整

现在在此处查看2个图像：（复制并粘贴到新浏览器中以查看图像。）

上图是android设备的Google Chrome浏览器。我已经在Google Chrome浏览器中打开了一个网页。您将看到支付div占用了整个设备屏幕大小，并以这种方式自行调整。我认为这里要做的是GWT（GoogleWebToolkit）通过识别实际html小于设备屏幕宽度，并隐式地将其拉伸到设备屏幕并丢弃空填充，来呈现接收到的html并高效地呈现它

现在，我来解决我的电话差距问题。下面是我的应用程序在设备中运行的屏幕截图。 请参见下面的3幅图像：（复制并粘贴到新浏览器中以查看图像。）

这里做了什么？phone gap通过android设备的本机web工具包（该应用程序目前正在android上测试）呈现收到的html。您可以看到收到的html div小于实际屏幕大小（可能与图1中的相同）。它没有提供移动应用程序的适当外观和感觉。如何使（图像3）接收到的html能够扩展到设备屏幕的全部大小。我已经编辑了一张图片来说明我真正想要的。 下图是我的要求。
这是4张图片（不是实际的快照，但它是必需的）：

请帮助我如何在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>

<!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>


.标题{
显示：内联块；
文本对齐：居中；
宽度：100%；
高度：100px；
背景：#203864；！重要；
}   
函数fixiFrame（）{
$（“#formframe”）.width（$（window.width（））；
$（“#formframe”）.height（$（window）.height（）*0.83 | 0）；
}
我的测试应用程序
app.initialize（）；
navigator.splashscreen.show（）；
这是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=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>

<!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浏览器）之间唯一的区别就是默认的缩放设置，在chrome浏览器上设置为适合页面宽度

因此，您的问题可能会有与此类似的答案：

您的问题似乎与此相关

问题源于viewport
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" />
谢谢但是我已经尝试了这个视图端口来缩小我的页面，但是它没有解决问题。嗨，亲爱的。同样的问题在这个链接中被详细解释。 
<!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>

<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 name="viewport" content="width=device-width, user-scalable=no, initial-scale=1" />