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

Posted 2023-05-06

【中文标题】Phonegap Developer App 和 Phonegap Build 有不同的行为

【英文标题】：Phonegap Developer App and Phonegap Build have different behavior

【发布时间】：2018-10-06 00:47:08

【问题描述】：

我正在为 android 和 ios 平台使用 phonegap 构建移动应用程序。 iOS 版本在构建版本和 Phonegap 开发者应用程序上看起来都很好并且完全相同。 Phonegap Developer App 也以同样的方式适用于 Android。 但是当我将 phonegap build 的 apk 文件安装到 Android 时，特定 div 的一些 html-layout 会得到错误的比例，就好像我在 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="[e-mail]" 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)

【参考方案1】：

如果您没有使用responsive 设计，则需要减小图像的大小，因为每个不同的设备都会发生这种情况。

【讨论】：

它只是css，不是图片（除了这个div里面的图片，但是图片的比例还可以，其余部分的尺寸不对）

@E.Dn 你用过响应式设计吗？

不，我没有，我使用了绝对值 (px)。真的有关系吗？我不明白为什么当我通过 phonegap 开发人员应用程序测试应用程序时它看起来不错，但在构建版本上看起来不同。不是必须完全一样吗？

建议使用响应式设计，只是因为用户会来到平板电脑，一切都会混合。只用平板电脑试试。或者在您的网络浏览器中打开它。也试试这个，也许它会解决你的问题；在 config.xml <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

我已经在我的 index.html 中使用了这个标签。我会记住关于响应式设计的要点，谢谢

【参考方案2】：

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

<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 文件且结构正确的应用，以确保它在每个设备上看起来（大部分）都相同。