使内容缩放并适合PhoneGap(使用viewport)

我正在尝试改编和移植一个老项目到PhoneGap。

到目前为止，该项目在Android浏览器下可以正常工作，但在PhoneGap上不行，因为它不能调整内容以适应整个屏幕。它总是留下空白，这不是我想要的。PhoneGap似乎没有注意到我的viewport属性在我使用的元标签。

我已经做了一些测试来找出问题，但没有任何结果。

例如，下面的测试只包含两个文件: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>

就是这样。我做错了什么吗?我如何存档我正在尝试做的事情?我相信它应该有一个相当简单的解决方案，但我现在找不到。

提前谢谢你，很抱歉我的英语不是我的母语。

欢呼,琼

Try

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

或如果您将以下行添加到onCreate()方法:

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

或尝试使用isroll 4 (http://cubiq.org/iscroll-4)缩放

当我偶然看到这篇文章时，我几乎放弃了: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
...

到你的meta viewport标签，这取决于你想做什么。

编辑:好的，这里有一个解释:http://developer.android.com/guide/webapps/migrating.html自Android 4.4 (KitKat)以来，WebView已经改变为基于chromium的新版本。通过将目标版本设置为低于19,webview将设置为quirks模式。

注意:如果你的targetSdkVersion被设置为"18"或更低，WebView操作在"怪癖模式"，以避免一些行为下面描述的更改，尽可能接近-同时仍然提供您的应用程序的性能和web标准升级。然而,小心单一和狭窄的列布局和默认的缩放级别不是在Android 4.4上是完全不支持的，并且可能存在其他行为差异还没有确定，所以一定要测试你的应用程序在Android 4.4或更高版本，即使你保持你的targetSdkVersion设置为"18"或以下

PP:使用LG L70手机

相关内容

最新更新

热门标签：