我有一个两列布局(左边是数据，右边是导航)。在 Safari 桌面上正确呈现，但 iPhone 版 Safari 右列呈现在页面底部数据下方。 基本的代码模板是:
<body>
<div class="colmask rightmenu">
<div class="colleft">
<div class="col1">
<!-- Column 1 start -->
<div class="ui-body ui-body-e">
<div data-role="collapsible" data-collapsed="true" data-theme="e" data-content-theme="b">
some data here
</div>
</div>
<!-- Column 1 end -->
</div>
<div class="col2">
<!-- Column 2 start -->
<div class="ui-body ui-body-b">
nav stuff here
</div>
<!-- Column 2 end -->
</div>
</div>
</div>
</body>
无论视口(viewport)宽度设置在什么位置(当前为 100&%)，问题都是一样的
这是 CSS:
body {
margin:0;
padding:0;
border:0;
width:100%;
background:#fff;
font-size:90%;
}
a {
color:#369;
}
a:hover {
color:#fff;
background:#369;
text-decoration:none;
}
h1, h2, h3 {
margin:.8em 0 .2em 0;
padding:0;
}
p {
margin:.4em 0 .8em 0;
padding:0;
}
img {
margin:10px 0 5px;
}
#ads img {
display:block;
padding-top:10px;
}
/* Header styles */
#header {
clear:both;
float:left;
width:100%;
}
#header {
border-bottom:1px solid #000;
}
#header p,
#header h1,
#header h2 {
padding:.4em 15px 0 15px;
margin:0;
}
#header ul {
clear:left;
float:left;
width:100%;
list-style:none;
margin:10px 0 0 0;
padding:0;
}
#header ul li {
display:inline;
list-style:none;
margin:0;
padding:0;
}
#header ul li a {
display:block;
float:left;
margin:0 0 0 1px;
padding:3px 10px;
text-align:center;
background:#eee;
color:#000;
text-decoration:none;
position:relative;
left:15px;
line-height:1.3em;
}
#header ul li a:hover {
background:#369;
color:#fff;
}
#header ul li a.active,
#header ul li a.active:hover {
color:#fff;
background:#000;
font-weight:bold;
}
#header ul li a span {
display:block;
}
/* 'widths' sub menu */
#layoutdims {
clear:both;
background:#eee;
border-top:4px solid #000;
margin:0;
padding:6px 15px !important;
text-align:right;
}
/* column container */
.colmask {
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.colright,
.colmid,
.colleft {
float:left;
width:100%;
position:relative;
}
.col1,
.col2,
.col3 {
float:left;
position:relative;
padding:0 0 1em 0;
overflow:hidden;
}
/* 2 Column (right menu) settings */
.rightmenu {
background:#eee; /* right column background colour */
}
.rightmenu .colleft {
right:25%; /* right column width */
background:#fff; /* left column background colour */
}
.rightmenu .col1 {
width:71%;
left:27%; /* (right column width) plus (left column left padding) */
}
.rightmenu .col2 {
width:21%;
left:31%;
}
/* Footer styles */
#footer {
clear:both;
float:left;
width:100%;
border-top:1px solid #000;
}
#footer p {
padding:10px;
margin:0;
}
最佳答案
您可能遇到此问题的原因是，与计算机相比，iPhone 和 iTouch 的分辨率设置与通用计算机不同。
http://en.wikipedia.org/wiki/IPod_Touch
http://en.wikipedia.org/wiki/IPhone
如果您不设置模板以识别移动计算机或显示器分辨率等细节，您将永远无法让您的 CSS 正确呈现您当时正在查看的屏幕。
即使您将其设置为 100%，您的 CSS 中也有不同的设置，iphone 或 iTouch 可能无法识别，因此您可能需要研究一下。
我一直致力于创造既对计算机友好又对 iPhone/iTouch 友好的东西，这并不容易。您将花 10 分钟编写脚本，然后花 30 分钟到两天时间完善它。
你可能想看看这个:
关于html - Mobile Safari 以不同方式呈现 CSS - 任何修复？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/11473271/