0

私は既存の固定幅のデスクトップ サイトで作業していますが、クライアントは既存のデスクトップ レイアウトを一切変更したくなく、「レスポンシブ」であることを望んでいます。

問題：

携帯電話（とにかく私のアンドロイド）で表示すると、「モバイル」サイトが期待どおりに読み込まれます。ただし、タッチ、移動、スクロールなどを行ったり、たまたま「ズームアウト」したりすると、次のように大量の空白ができます。

ここに画像の説明を入力

バックグラウンド：

記録のために: 「モバイル」ビューの新しい仕様には、既存のコンテンツと常に一貫して相関するとは限らない、いくつかの新しいコンテンツ、新しいメニュー オプションなどが含まれています。

したがって、私のアプローチは、保持したい要素に css クラスを追加し、jQuery.clone()、.append()、および appendTo() を使用して既存のコンテンツを可能な限り再利用し、要素を移動することでした。私の新しい「モバイル足場」に：

$('.mobile-header').appendTo($('#PH_mobile_header'));
$('.mobile-content').appendTo($('#PH_mobile_content'));
$('.mobile-footer').appendTo($('#PH_mobile_footer'));

単純化された足場:

<div id= "PH_mobile_wrapper" class="mobile-wrapper mobile visible-xs">
    <div class="row row-offcanvas row-offcanvas-left">
        <div id="main" class= "col-xs-12">
          <div id="PH_mobile_header" class="visible-xs">
            <!-- HEADER -->
          </div>
          <div id="PH_mobile_content" class="container visible-xs">
            <!-- CONTENT -->
          </div>
          <div id="PH_mobile_footer" class="visible-xs">
            <!-- FOOTER -->
          </div>
        </div>
    </div>
</div>

また、新しい LESS スタイルシートの 2 つのセクションを使用して、いくつかの調整を行っています。例えば：

//DESKTOP:
@media(min-width:768px){

  h1{
    font-size: 2em !important;
  }

  body{
    background-color: @ltgrey;
  }

  .navbar{
    width:1000px;
    margin: auto;
    border-right: solid black 1px;
  }

  .mobile{
    display: none;
  }
}

//MOBILE:
@media(max-width:768px){

  li.inverse{
    background-color: @dkgrey;
    color: white;

    a{
      color: white;
      &:hover, &:focus{
        background-color: @olacred;
      }
    }

  }

}

記録のために、関連する場合はブートストラップ 3.0 と php を使用しています。ブートストラップが何らかの形でこれに関連している場合に備えて、私は言及します。

スタンダードから始めました

<meta name="viewport" content="width=device-width, initial-scale=1">

そして私は試しました

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no,maximum-scale=1">

CSS @viewport についてもお読みください。

スタイルシートの最後でこれを明示的に実行しようとさえしました:

#layout_wrapper, #layout_container,.dashboard_home_highlights,
.collapse-wrapper,#alpha,#beta,.dashboard_col_1_rotonator, 
.orbit > a > img, .orbit > a{
  // display: none !important;
  max-width:300px !important;
}

何とか。

質問は次のとおりです。

を。この「ビューポート」の問題を修正するにはどうすればよいですか。このオールラウンドなアプローチは大丈夫ですか？

編集: これは部分的なデモです: http://myapp.gristech.com/demo/viewport

うーん...私は問題全体を完全に再現できませんでしたが、ここでアプローチと1つのバグを見ることができます.電話でこれを引き出してズームインすると、テキストがビューに正しく押し込まれます. 次に、ズームアウトします...テキストは本来のように再び拡大されず、いわば余分な空白が残り、その後スクロールダウンすると「ぐらつきます」。1000px のサイトが「最初に」読み込まれるため、「レイアウト ビューポート」は 1000px のままです。あなたの時間と努力に感謝します

4

0 に答える 0