应用程序在 android 上的呈现方式与使用 phonegap 的 iOS 不同答案

【问题标题】：app renders differently on android than iOS using phonegap应用程序在 android 上的呈现方式与使用 phonegap 的 iOS 不同
【发布时间】：2015-12-29 03:32:43
【问题描述】：

我在应用商店中有一个应用，它可以为所有 iPhone 和 iPad 呈现恰到好处的屏幕。 app page rendering on iOS iphone5

但是，一旦我在 PGB for android 中重新构建了应用程序并将其上传到 Google Play 商店并发布了它，屏幕现在呈现得更小了。 same app page rendering on Samsung Galaxy S5

我查看了其他一些帖子，有些人建议查看视口并更改 densitydpi，而其他人则说查看 CSS 和我使用的一些绝对定位。只是想知道是否有人可以将我重定向到为什么 iOS 版本看起来像我想要的但 Android 版本在他们使用 www 文件夹中的相同代码和所有相同的 html、css 和 js 文件时要小得多。 Android 是在寻找我拥有的代码中不存在的东西，还是 iOS 否定了我拥有的一些代码，而 Android 正在渲染它。

这是我的一些来自 html 和 css 页面的代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="msapplication-tap-highlight" content="no" />
    <meta name="viewport" content="user-scalable=no, initial-scale=1,     maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

还有一些css...

body {
height: 100%;
position: fixed;
overflow-y: scroll;
margin: 0px;
padding: 0px;
width: 100%;
font-family: 'Roboto', sans-serif;
}

h1 {
font-weight: 300;  
}

.text {
width: 30px;   
margin-left: 20px;
margin-right: 20px;
border: none;
font-size: 30px;
}

#equals {
cursor: pointer;
border: none;
background-color: #ffffff;   
font-size: 20px;
border-style: solid;
border-color: #007AFF;
border-width: 2px;
border-radius: 2px;
outline: none;
margin-top: 15px;
font-size: 30px;
}

#waterTank {
position: relative;
top: -50px;
z-index: 2;
}

#whiteCover {
position: absolute;
width: 100%;  
height: 600px;
background-color: #ffffff;
top: 402px;
z-index: 2;
}

还有一些来自 config.xml 页面的代码在 config.xml 上

<?xml version="1.0" encoding="UTF-8" ?>
<widget xmlns = "http://www.w3.org/ns/widgets"
xmlns:gap = "http://phonegap.com/ns/1.0"
id        = "our group"
version   = "1.3">

<name>Watertank Math</name>

<description>
Teaching addition and subtraction of integers.
</description>

<author href="my webpage here" email="mine here">
yours truely
</author>

<preference name="phonegap-version" value="cli-5.2.0" />
<preference name="orientation" value="portrait"/> 

<plugin name="cordova-plugin-whitelist" source="npm" spec="1.1.0" />
<allow-navigation href="*" />
<allow-intent href="*" />

当我们构建应用程序时，我们使用了 phonegap 开发者应用程序，所有页面看起来都很好，没有一个比其他的小，而且我们使用终端运行 phonegap serve 命令的 iOS 和 Android 设备看起来都一样。 phonegap 开发者应用在 iOS 和 Android 帮助上看起来完全一样的事实？

最后在盔甲上扔了最后一个扭结…… 我要补充的另一件事是，我的其他页面的图形较少，但一切都很好，但是当我转到其他页面时，一切都缩小了。

抱歉，由于我的声望尚未达到 10，因此我无法链接超过 2 个项目。

但这就是我的 html 在这个主页文件上的样子（添加了 CPS 代码）...

<meta http-equiv="Content-Security-Policy"
content="default-src *;
style-src * 'self' 'unsafe-inline' 'unsafe-eval';
script-src * 'self' 'unsafe-inline' 'unsafe-eval';">
<link type="text/css" rel="stylesheet" href="css/index.css" />
<!-- START STYLE SHEET FOR MENU -->   
<link type="text/css" rel="stylesheet" href="css/menu.css" />
<link type="text/css" rel="stylesheet" href="css/Home.css" />
<link type="text/css" rel="stylesheet" href="dist/css/jquery.mmenu.all.css" />

以及其中的一些 css...

body {
font-family: 'Roboto';
font-weight: 100; 
}

#logoText {
padding-top: 20px;
padding-bottom: 20px;
width: 200px;
}

#intro {
width: 300px;
opacity: 0;
-webkit-animation: slideIn .75s 0s 1 forwards;
-moz-animation: slideIn .75s 0s 1 forwards;
-o-animation: slideIn .75s 0s 1 forwards;
}

#intro p {
font-size: 35px;   
color: #000000;   
}

@-webkit-keyframes slideIn {
0% {
    padding-left: 500px;
}
100% {
    padding-left: 0px;
    opacity: 1;
}
}
@-moz-keyframes slideIn {
0% {
    padding-left: 500px;
}
100% {
    padding-left: 0px;
    opacity: 1;
}
}
@-o-keyframes slideIn {
0% {
    padding-left: 500px;
}
100% {
    padding-left: 0px;
    opacity: 1;
}
}

.menu {
margin-bottom: 5px;

}

.menu a {
color: #000000;
font-size: 30px;
font-weight: 100;
margin-top: 0px;
margin-bottom: 0px;
text-decoration: none;
}

#begin {
margin-right: 300px;
border-style: solid;
border-width: 1px;
border-radius: 20px;
border-color: #000000;
margin-top: 10px;
width: 180px;
opacity: 0;
-webkit-animation: slideIn1 .5s .5s 1 forwards;
-moz-animation: slideIn1 .5s .5s 1 forwards;
-o-animation: slideIn1 .5s .5s 1 forwards;
} 

@-webkit-keyframes slideIn1 {
0% {
    margin-right: 500px;
}
100% {
    margin-right: 0px;
    opacity: 1;
}
}
@-moz-keyframes slideIn1 {
0% {
    margin-right: 500px;
}
100% {
    margin-right: 0px;
    opacity: 1;
}
}
@-o-keyframes slideIn1 {
0% {
    margin-right: 500px;
}
100% {
    margin-right: 0px;
    opacity: 1;
}
}

这些页面从 iOS 到 android 的渲染效果相同，而其他页面却没有，有什么特别的原因吗？我应该删除所有的

<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="yes" />
<meta name="viewport" content="user-scalable=yes, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />

似乎在 iOS 和 Android 上呈现相同的 html 页面上，它们在页面顶部没有任何此元代码，而那些不呈现相同的都具有此代码。非常困惑如何纠正这个渲染。

【问题讨论】：

标签： android html ios css cordova

【解决方案1】：

感谢您的建议。我想用我从另一个来源得到的答案来更新这篇文章。我使用此元标记更改了较小页面上的元标记...

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

一切看起来都像它应该的那样，并且像我想要的那样工作！希望这也可以帮助其他人。

【讨论】：

【解决方案2】：

使用了不同的 webkit。在我看来，这是开发混合应用程序的最大问题。

我使用 cordova-plugin-device 检查平台和版本，然后将相同的类添加到正文中。一般来说，我将平台作为一个类添加到正文中，在此示例中，我检查 Android 版本是否低于 4.4。

$("body").addClass(device.platform);

if (device.platform === "Android") {
   var tmp = device.version.split(".");
   if (parseFloat(tmp[0] + "." + tmp[1]) < 4.4) {
      $("body").addClass("API18");
   }
}

您还可以找出设备名称。

添加类后，您可以修改 CSS。

为了测试这一切，一个好方法是使用Genymotion。

【讨论】：