0

我有一个两列布局（左侧的数据和右侧的导航）。在 Safari 桌面上正确呈现，但 Safari for iPhone 右栏呈现在数据下方的页面底部。基本代码模板是：

<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>

无论视口宽度设置在什么位置（当前为 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;
}
4

1 回答 1

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 分钟到两天来完善它。

您可能想调查一下：

纯粹通过 css 检测 iPhone/iPad

于 2012-07-13T16:12:40.820 回答