Question

我在应用程序商店中有一个应用程序，可以使屏幕适合所有iPhone和iPad。 app page rendering on iOS iphone5

然而，一旦我在PGB中为Android重建应用程序并将其上传到Google Play商店并且它已经发布，屏幕现在渲染得更小。 same app page rendering on Samsung Galaxy S5

我查看了其他一些帖子，有些建议查看视口并更改densitydpi，而其他人则说看看CSS和我使用的一些绝对定位。只是想知道是否有人可以重定向我为什么iOS构建看起来像我想要但是当他们在www文件夹中使用相同的代码和所有相同的html，css和js文件时，Android的小得多。 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设备看起来都相同。事实上，在iOS和Android上，phonegap开发者应用看起来一样吗？

最后在盔甲中抛出最后一个扭结...... 我要补充的另一件事是，我有其他页面的图形较少，一切都很好，但当我去其他页面时，一切都缩小了。

抱歉，由于我的声誉尚未达到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" />

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

Answer 1

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

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

似乎所有东西看起来都应该像我想要的那样工作！希望这也可以帮助其他人。

Answer 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。

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

2 个答案: