我在 App Store 上有一个应用程序可以为所有 iPhone 和 iPad 呈现恰到好处的屏幕。 app page rendering on iOS iphone5
但是，一旦我在 PGB for android 中重建应用程序并将其上传到 Google Play 商店并发布，屏幕现在呈现得更小了。 same app page rendering on Samsung Galaxy S5
我查看了其他一些帖子，有些人建议查看视口(viewport)并更改 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 设备看起来都一样。 phonegap 开发者应用程序在 iOS 和 Android 上看起来一样这一事实有什么帮助吗？
最后在盔甲上抛出最后一个扭结...... 我要补充的另一件事是，我有其他页面的图形较少，在这些页面上一切正常，但当我转到其他页面时，一切都缩小了。
抱歉，我不能链接超过 2 个元素，因为我的声誉还没有达到 10。
但这就是我的 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 页面上，它们在页面顶部没有任何此元代码，而呈现不同的页面都有此代码。非常困惑如何修正这个渲染。
最佳答案
感谢您的建议。我想用我从另一个来源得到的答案更新这篇文章。我用这个元标记更改了较小页面上的元标记...
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0"/>
一切似乎都如我所愿，如我所愿! 希望这也能帮助其他人。
关于android - 应用程序在 Android 上的呈现方式与使用 phonegap 的 iOS 不同，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34504012/