使用 PhoneGap 缩放和适应内容（使用视口）答案

【问题标题】：Make content to scale and fit with PhoneGap (using viewport)使用 PhoneGap 缩放和适应内容（使用视口）
【发布时间】：2013-04-02 07:02:51
【问题描述】：

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

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

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

干杯，琼

【问题讨论】：

标签： html css cordova viewport metatag

【解决方案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) 捏合/缩放

【讨论】：

【解决方案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" />

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

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

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

编辑：好的，这是一个解释：http://developer.android.com/guide/webapps/migrating.html 自 Android 4.4 (KitKat) 以来，WebView 已更改为基于 Chromium 的新版本。由于目标版本低于 19，webview 设置为 quirks 模式。

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

PP：使用 LG L70 手机。

【讨论】：