0
我在應用程序商店中有一個應用程序，可爲所有iPhone和iPad呈現恰到好處的屏幕。 app page rendering on iOS iphone5應用程序在iOS上使用電話不同地呈現不同的應用程序
但是，一旦我在PGB for 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中頁面 上配置一些代碼。 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頁面，他們沒有任何的這一薈萃代碼在頁面的頂部，而那些不渲染相同的都有這個代碼。非常困惑如何糾正這個渲染。