【发布时间】：2018-04-01 21:54:48
【问题描述】：
为什么我的网页设计在 iphone 和 android 上看起来如此不同。我的所有元素都完全符合我在 android 上的要求，但在 iPhone 上却错了，即使我在两者上都使用 Chrome 作为浏览器？ 我什至使用谷歌开发工具从 iPhone 比例设计了网站，但它比 iPhone 更适合安卓？
http://e-daktik.dk/bonde5a.html
编辑： 主要问题是文本不适合方框。但其他事情也会出错，例如，一些图标图片在 iPhone 上不成比例。但是，是的，我现在明白了，我不应该把对话框做成图片，而应该把它做成 CSS 背景。这至少可以解决一些问题。
ty
body {
background-image: url(http://e-daktik.dk/messengerbaggrund.png);
background-repeat: no-repeat;
background-size: cover;
}
a:link {
text-decoration: none;
color: black;
}
a:visited {
text-decoration: none;
}
.icon {
animation: shake 0.5s;
animation-iteration-count: 20;
animation-delay: 10s;
}
@keyframes shake {
0% { transform: translate(1px, 1px) rotate(0deg); }
10% { transform: translate(-1px, -2px) rotate(-1deg); }
20% { transform: translate(-3px, 0px) rotate(1deg); }
30% { transform: translate(3px, 2px) rotate(0deg); }
40% { transform: translate(1px, -1px) rotate(1deg); }
50% { transform: translate(-1px, 2px) rotate(-1deg); }
60% { transform: translate(-3px, 1px) rotate(0deg); }
70% { transform: translate(3px, 1px) rotate(-1deg); }
80% { transform: translate(-1px, -1px) rotate(1deg); }
90% { transform: translate(1px, 2px) rotate(0deg); }
100% { transform: translate(1px, -2px) rotate(-1deg); }
}
}
.npcbox1 {
position: relative;
}
.npcbox1text {
position: absolute;
top: 15%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
padding-left: 17%;
padding-right: 35%;
font-size: 30px;
}
.pbox {
position: relative;
-webkit-animation-duration: 10s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-delay: 1s;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.pboxtext {
position: absolute;
top: 20%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
padding-left: 43%;
padding-right: 2%;
font-size: 30px;
}
.npcbox2 {
position: relative;
-webkit-animation-duration: 10s;
animation-duration: 3s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
animation-delay: 2s;
}
@-webkit-keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
@keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
.fadeIn {
-webkit-animation-name: fadeIn;
animation-name: fadeIn;
}
.npcbox2text {
position: absolute;
top: 10%;
font-family: "Trebuchet MS", Helvetica, sans-serif;
padding-left: 17%;
padding-right: 35%;
font-size: 30px;
}
.saybox {
position: fixed;
bottom: 0px;
}
【问题讨论】：
-
有什么区别？
-
无论屏幕宽度如何，顶部框中的文本看起来都错位了，尽管宽度小于 858 像素并且会溢出。我不建议将这些对话框作为图像。相反，请使用 CSS 背景，以便它们可以随其中包含的文本进行缩放。
-
主要问题是文本不适合方框。但其他事情也会出错，例如，一些图标图片在 iPhone 上不成比例。但是，是的，我现在明白了，我不应该把对话框做成图片，而应该把它做成 CSS 背景。这至少可以解决一些问题。
标签： android css iphone difference