Question

我正在为Android和iOS平台开发使用phonegap构建的移动应用程序。在构建版本和Phonegap开发者应用程序中，iOS版本看起来很好并且相同。此外，Phonegap Developer App的工作方式与Android相同。但是当我将androidgap build的apk文件安装到Android时，某些特定div的html布局会出现错误的比例，就好像我在css中为这个div写了另一个宽度。但我的应用程序的其余部分看起来还不错。在这种情况下，对我来说最令人困惑的是Phonegap Build应用程序和phonegap开发应用程序的不同外观。我试图从config.xml中删除所有插件，以检查它们是否会以某种方式影响应用程序的行为，但结果是一样的。所以我的问题是：为什么构建和开发人员版本的行为可能存在差异？

<?xml version='1.0' encoding='utf-8'?>
<widget id="myapp" ios-CFBundleIdentifier="myapp" version="1.0.3" xmlns="http://www.w3.org/ns/widgets" xmlns:gap="http://phonegap.com/ns/1.0">
<name>Test App</name>
<description>
    Hello World sample application that responds to the deviceready event.
</description>
<author email="support@phonegap.com" href="http://phonegap.com">
    PhoneGap Team
</author>
<content src="index.html" />
<access origin="*" />
<allow-intent href="*" />
<allow-navigation href="*" />
<preference name="fullscreen" value="false" />
<preference name="Orientation" value="portrait" />
<preference name="DisallowOverscroll" value="true" />
<preference name="android-minSdkVersion" value="16" />
<edit-config file="AndroidManifest.xml" mode="overwrite" target="/manifest/application/activity[@android:name='MainActivity']">
    <activity gap:configChanges="orientation|keyboardHidden" gap:windowSoftInputMode="adjustPan" />
</edit-config>
<branch-config>
    <branch-key value="some_key" />
    <uri-scheme value="some_value" />
    <link-domain value="some_domain" />
    <ios-team-release value="some_value" />
</branch-config>
</widget>

It looks ok It looks wrong (the circle)

Answer 1

如果您没有使用responsive设计，则需要缩小图像的大小，因为这会在每个不同的设备上发生。

Answer 2

如果问题与HTML内容大小有关，则会发出 viewport 问题。所有制造商都倾向于更改Android webview引擎，因此要确保您的应用在大多数设备上看起来都一样，您必须将此元标记添加到head文件的index.html部分：

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

这意味着：

用户无法在您的应用内放大
初始缩放为100％（表示无缩放）
视口宽度（页面水平尺寸）与设备宽度
视口高度与设备高度相同

要防止出现此类问题，您应该在使用命令行界面创建新应用时使用Cordova生成的示例index.html创建应用。这将创建一个带有index.html和CSS文件的应用程序，其中包含适当的结构，以确保它在每个设备上看起来（大部分）相同。

Phonegap Developer App和Phonegap Build有不同的行为

2 个答案: