Question

我非常感谢有关上述问题的任何建议。

我已经在主要的桌面浏览器上测试了该网站，一切看起来都不错。

然而，在歌剧中，在我的智能手机上，所有文字都被压缩到一个狭窄的列中，以至于文本与其他元素重叠。我被告知这也是iPhone的情况。

就好像在文本中添加了太多的填充，但这似乎不是问题。

我想也许移动设备上的字体大小正在增加，但它似乎是成比例的。

最后一个想法是渲染过多的换行符？

N.B其他一切看起来都很好，只有文字受到影响

这是一个示例页面http://www.cajoledesign.co.uk/main%20menu.html

这是（可怕的，我确定！）CSS。

body {
background:#fff;
font-size:100%;
margin:0;
padding:0;
}

#container {
height:2370px;
width:900px;
position:relative;
margin:0 auto;
}

a img {
border:0;
}

.style2 {
color:#666;
}

.style3 {
color:#999;
}

.style5 {
font-size:24pt;
}

@font-face {
font-family:TitlingGothicFBSkylineRegul;
src:url(../fonts/TitlingGothicFBSkylineRegul.woff);
}

h1 {
color:#fff;
font:34pt TitlingGothicFBSkylineRegul, arial, Century Gothic, Helvetica, sans-serif;
padding-left:60px;
padding-bottom:15px;
line-height:18px;
letter-spacing:.04em;
}

p.content {
color:#ccc;
font-size:10pt;
font-weight:400;
font-family:arial, arial, sans-serif;
line-height:18px;
padding-left:60px;
padding-right:80px;
text-align:left;
}

#background {
height:2370px;
width:900px;
background-image:url(../images/blackbackground.jpg);
background-repeat:repeat;
position:absolute;
}

#aiologo {
height:209px;
width:170px;
background:url(../images/logo.png) no-repeat;
position:absolute;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
top:0;
}

#phonenumber {
height:50px;
position:absolute;
left:50px;
top:125px;
}

#mediaiconscontainer {
width:90px;
position:absolute;
left:50px;
top:180px;
}

#facebookicon {
float:left;
}

#twittericon {
float:left;
margin-left:10px;
}

#goodfoodlogo {
position:absolute;
right:50px;
top:120px;
}

img.floatLeft {
float:left;
margin-right:20px;
margin-bottom:10px;
}

img.slash {
margin-top:30px;
}

ul#topnav {
width:315px;
list-style:none;
height:60px;
position:absolute;
padding-left:50px;
top:30px;
}

ul#topnav li#topnav-1 a {
width:105px;
background:url(../images/nav.png) no-repeat 0 0;
}

ul#topnav li#topnav-2 a {
width:105px;
background:url(../images/nav.png) no-repeat -105px 0;
}

ul#topnav li#topnav-3 a {
width:105px;
background:url(../images/nav.png) no-repeat -210px 0;
}

ul#topnav2 {
width:315px;
list-style:none;
height:60px;
position:absolute;
right:50px;
top:30px;
}

ul#topnav2 li#topnav-1 a {
width:105px;
background:url(../images/nav2.png) no-repeat 0 0;
}

ul#topnav2 li#topnav-2 a {
width:105px;
background:url(../images/nav2.png) no-repeat -105px 0;
}

ul#topnav2 li#topnav-3 a {
width:105px;
background:url(../images/nav2.png) no-repeat -210px 0;
}

#menucontainer {
position:absolute;
top:550px;
width:800px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

#spielcontainer {
position:absolute;
top:230px;
width:800px;
height:300px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

p.spiel {
color:#ccc;
font-size:11pt;
font-weight:400;
font-family:georgia, arial, serif;
line-height:20px;
padding-left:60px;
padding-right:80px;
text-align:left;
}

h2 {
color:#f1731e;
font-size:14pt;
font-weight:400;
font-family:arial, arial, serif;
line-height:18px;
padding-left:60px;
padding-right:80px;
text-align:left;
margin-top:30px;
}

h3 {
color:#f1731e;
font-size:16pt;
font-weight:400;
font-family:georgia, arial, serif;
line-height:18px;
padding-left:60px;
padding-right:80px;
text-align:left;
}

#footer {
position:absolute;
width:800px;
height:80px;
top:2290px;
left:0;
right:0;
margin-left:auto;
margin-right:auto;
}

ul.footer {
list-style-type:none;
padding-bottom:30px;
margin:0;
}

li.footer {
display:inline;
float:right;
margin-right:8px;
}

li.footer a {
color:#fff;
font-size:10pt;
font-weight:400;
font-family:georgia, arial, serif;
line-height:18px;
}

li.footer a:hover {
color:#f1731e;
font-size:10pt;
font-weight:400;
font-family:georgia, arial, serif;
line-height:18px;
}

p.footer {
color:#666;
font-size:8pt;
font-weight:400;
font-family:georgia, arial, serif;
line-height:18px;
text-align:left;
}

ul#topnav li,ul#topnav2 li {
display:inline;
}

ul#topnav li a,ul#topnav2 li a {
height:60px;
float:left;
text-indent:-9999px;
text-decoration:none;
}

ul#topnav li#topnav-1 a:hover,ul#topnav2 li#topnav-1 a:hover {
background-position:0 -60px;
}

ul#topnav li#topnav-1 a.current,ul#topnav2 li#topnav-1 a.current {
background-position:0 -120px;
}

ul#topnav li#topnav-2 a:hover,ul#topnav2 li#topnav-2 a:hover {
background-position:-105px -60px;
}

ul#topnav li#topnav-2 a.current,ul#topnav2 li#topnav-2 a.current {
background-position:-105px -120px;
}

ul#topnav li#topnav-3 a:hover,ul#topnav2 li#topnav-3 a:hover {
background-position:-210px -60px;
}

ul#topnav li#topnav-3 a.current,ul#topnav2 li#topnav-3 a.current {
background-position:-210px -120px;
}

Answer 1

以HTML格式查看<meta name="viewport" ...命令。

文本出现在移动浏览器上比在桌面上更窄的列中，因此，它被挤出页面

1 个答案: