Question

我有两列布局（左侧数据和右侧导航）。在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＆amp;％）

，问题都是相同的

这是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;
}

Answer 1

您可能遇到此问题的原因是因为iPhone和iTouch与计算机相比具有与通用计算机不同的分辨率设置。

http://en.wikipedia.org/wiki/IPod_Touch

http://en.wikipedia.org/wiki/IPhone

如果您没有将模板设置为识别移动数据终端或显示器分辨率等细节，那么您永远不会为正在查看的屏幕正确渲染CSS。

即使您将其设置为100％，您的CSS中也有不同的设置，即iphone或iTouch可能无法识别，因此您可能需要查看。

我一直在努力创造既适合电脑又适合iPhone / iTouch的东西，这并不容易。你将花10分钟写剧本，30分钟到两天完成它。

你可能想看看这个：

Detect iPhone/iPad purely by css

移动Safari以不同的方式呈现CSS - 任何修复？

1 个答案: