7

我正在尝试将旧项目改编并移植到 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>

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

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

干杯，琼

4

2 回答 2

1

当我偶然发现这篇文章时，我几乎放弃了：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" />

你可以稍微玩一下这个版本。我猜只是不要针对版本 19。另外，您可以添加

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

到您的元视口标签，具体取决于您要执行的操作。

编辑：好的，这是一个exploanation： http: //developer.android.com/guide/webapps/migrating.html 自Android 4.4（KitKat）以来，WebView 已经更改为基于铬的新版本。通过将目标版本设置为低于 19，webview 设置为 quirks 模式。

注意：如果您的 targetSdkVersion 设置为“18”或更低，WebView 将在“怪癖模式”下运行，以尽可能避免下面描述的一些行为变化——同时仍为您的应用程序提供性能和 Web 标准升级。但请注意，Android 4.4 根本不支持单列布局和窄列布局以及默认缩放级别，并且可能存在尚未确定的其他行为差异，因此请务必在 Android 4.4 或更高版本上测试您的应用程序，即使您将 targetSdkVersion 设置为“18”或更低。

PP：使用 LG L70 手机。

于 2015-02-27T00:58:49.580 回答
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 ) 捏/缩放

于 2013-06-10T12:46:33.603 回答