0

2列のレイアウトがあります（左側のデータと右側のナビゲーション）。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 分から 2 日かかります。

あなたはこれを調べたいかもしれません:

css だけで iPhone/iPad を検出する

于 2012-07-13T16:12:40.820 に答える