Question

我正在尝试调整并将旧项目移植到PhoneGap。

到目前为止，该项目在Android浏览器下正常运行，但它不适用于PhoneGap，因为它不会调整内容以适应整个屏幕。它总是留下一个空白，这不是我想要的。 PhoneGap似乎没有注意我正在使用的元标记中的视口属性。

我一直在做一些测试，以找出问题而没有任何结果。

例如，以下测试只包含两个文件：index.html和config.xml

它包含一个宽度为276像素的DIV，我希望PhoneGap能够像Android浏览器那样使整个页面适合。

顺便说一句，我正在使用PhoneGap Build网站在线构建此测试。

以下是index.html文件的内容（我没有使用DOCTYPE使其更简单，但即使使用它也无法正常工作）：

<html>
    <head>
        <meta name="viewport" content="width=276, user-scalable=yes" />
        <title>Title</title>
    </head>
    <body>
        <div style="width:276px; background-color:orange;">I want to make this div fit to the page</div>
    </body>
</html>

这是config.xml文件的内容（请注意首选项EnableViewportScale设置为“true”，但即使设置为“yes”也不起作用）：

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
        xmlns:gap = "http://phonegap.com/ns/1.0"
        id        = "com.phonegap.example"
        versionCode="10" 
        version   = "1.0.0">

    <!-- versionCode is optional and Android only -->

    <name>PhoneGap Example</name>

    <description>
        An example for phonegap build docs. 
    </description>

    <author href="https://build.phonegap.com" email="support@phonegap.com">
        Hardeep Shoker 
    </author>

    <preference name="EnableViewportScale" value="true" />
</widget>

就是这样。有什么我做错了吗？我怎样才能实现我想做的事情？我相信它应该有一个非常简单的解决方案，但我现在找不到它。

非常感谢你，对我的英语感到抱歉，这不是我的母语。

干杯，琼

Answer 1

尝试

<meta name="viewport" content="width=276, user-scalable=1" />

或如果您将以下行添加到 onCreate（）方法：

WebSettings settings = this.appView.getSettings(); settings.setSupportZoom(true); settings.setBuiltInZoomControls(true);

或尝试使用iScroll 4（http://cubiq.org/iscroll-4） 捏合/缩放

Answer 2

当我偶然发现这篇文章时，我几乎放弃了： http://antonylees.blogspot.com/2012/06/phonegap-viewport-size-is-too-small-on.html

基本上我修改了我的默认AndroidManifest.xml条目：

<uses-sdk android:minSdkVersion="10" android:targetSdkVersion="19" />

到

<uses-sdk android:minSdkVersion="7" />

您可以使用版本lil位。我想，不要瞄准19版。另外，您可以添加

target-densitydpi=device-dpi
target-densitydpi=medium-dpi
...

到您的元视口标记，取决于您尝试做什么。

编辑：好的，这是一次探索：http://developer.android.com/guide/webapps/migrating.html 自从Android 4.4（KitKat）以来，WebView已经改变了基于chrome的新版本。通过将目标版本设置为低于19，webview将以怪癖模式设置。

注意：如果您的targetSdkVersion设置为＆＃34; 18＆＃34;或更低，WebView 在＆＃34; quirks模式下运行＆＃34;为了避免一些行为下面描述的变化尽可能接近 - 同时仍然提供您的应用程序的性能和Web标准升级。 请注意，单个和窄列布局和默认缩放级别不是在Android 4.4 上完全支持，并且可能还有其他行为尚未确定的差异，因此请务必测试您的应用在Android 4.4或更高版本上，即使您将targetSdkVersion设置为＆＃34; 18＆＃34;或更低。

PP：使用LG L70手机。

使内容扩展并适合PhoneGap（使用视口）

2 个答案: