ipadをポートレートからランドスケープに回転させるとき、divは同じ幅のままです。

私は現在、最初のWebアプリケーションを開発しており、問題を抱えています。アプリが開かれると、iPadを縦向きに回転させるときと同じように、下のナビゲーション区画（下の写真）がうまくレンダリングされます。しかし、私が肖像画から風景に回転するとき、少なくとも私が画面に触れるまで、同じ幅を維持しているようです。それは私がスクロールを開始するときに正常な状態に戻りますが、それはちょっとした目障りなものです。私はいくつかの画像を添付しました：ipadをポートレートからランドスケープに回転させるとき、divは同じ幅のままです。

ポートレート：

nav {background-image: linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); 
    background-image: -o-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); 
    background-image: -moz-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); 
    background-image: -webkit-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); 
    background-image: -ms-linear-gradient(bottom, rgb(0,0,0) 15%, rgb(51,51,51) 69%); 
    background-image: -webkit-gradient(
    linear, 
    left bottom, 
    left top, 
    color-stop(0.15, rgb(0,0,0)), 
    color-stop(0.69, rgb(51,51,51))); 
    border-top: 1px solid #000; 

    text-align: center; 
    position: fixed; 
    bottom: 0px; 
    left: 0px; 
    width: 100%; 
    height: 51px; 
    color:#CCC; 
    font-size:11.3px; 
    font-weight:bold; 
    overflow: hidden; 
    margin: 0 auto 0;}

：

これは私がそのdiv要素のために使用していCSSです：
enter image description here

縦から横に回転した後、

これをラウンドしてdivを自動的に画面の幅に塗りつぶす方法はありますか？

出典

2012-01-13 David

私は 'position：fixed;'を相対的なものに変更しました。問題をソートしましたが、明らかにナビゲーションはページの一番下に固定されていません。どこに問題があるのですか。アイデアは誰ですか？ – David

残りのコードを投稿できますか？ – Wex

私は本当にコメントにすべてを投稿する部屋を持っていないし、私は新しいので、私は私の最初の投稿を編集できません。構造は基本的には

であり、navは上記のCSSでnavContentは以下のとおりです。 '#navContent {width：550px;マージン：0オート0; } ' – David

固定幅ピクセルに設定するのではなく、幅プロパティで行うことができると思いますが、なぜ100％に設定してください。

実際のデバイスではなく、エミュレータでテストしました。 iOSシミュレータでうまくいくようです。私は二回、この問題が発生した

<html> 
    <head> 
     <style> 
      #nav{ 
       position:fixed; 
       bottom:0px; 
       left:0px; 
       height:40px; 
       width:100%; 
       background:blue; 
       text-align:center; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="nav"> 
      <p>My Navigation bar</p> 
     </div> 
    </body> 
</html>

出典

2012-01-17 21:02:37 jonhurlock

こんにちは、nav divの幅は現在100％に設定されており、div内のdivは550pxに設定されています。しかし、私はそれが問題を引き起こしているとは思わない。それがポートレートから風景に向かうとき、それは550pxよりも大きい（私が覚えているものから約200pxだけ）肖像画のスクリーンの幅を維持している。 – David

@カイこれは、あなたのスタイルシートの全体的な問題だと思います。より多くのコード、つまりhtmlとcssを投稿した場合は、もっと手伝ってください。 ** [リンク]（http://www.roccles.com/?p=140）**をご覧ください。これはjQueryモバイルフレームワークを使用し、方向の変化を検出する方法を説明し、方向の変化に合わせてコンテンツを変更する例を示します。ボディに風景や肖像画のクラス、つまりbody.landscapeとbody.portrainを与え、それぞれのスタイルを作成すると、問題を解決するはずです。 – jonhurlock

：相続人

私が何を意味するかの例

。初めて、私が働いていた

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

に

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

から私のビューポートのメタタグを変更する必要がありましたが、それはないだろう次回、本質的に同じ構造にもかかわらず...この時、

@media screen and (max-device-width: 480px) and (orientation:landscape) { 
    #navbar{width:480px;} 
    #foot{width:480px;} 
} 
@media screen and (min-device-width: 481px) and (orientation:landscape) { 
    #navbar{width:1024px;} 
    #foot{width:1024px;} 
}

出典

2012-06-22 04:29:11

メタタグの変更は私のために働いた！本当にありがとう！ – Stefan

-2

どう修正thisについて：CSSで、私はposition:fixed;bottom:0;width:100% するフッターを設定しますがでそれに続いたので、私は、メディアクエリを使用していましたか？

@media screen and (orientation: landscape){ 
    .fix-orientation { background:red; } /* This will cause a style recalculation */ 
}

出典

2013-09-19 21:36:19 Adaptabi

これはGalaxy S3の在庫ブラウザで動作するかもしれませんが、Safari iPad（ちょうどテスト済み）では動作しません。 [私の答え]（http://stackoverflow.com/questions/7919172/what-is-the-best-method-of-re-rendering-a-web-page-on-orientation-change/31357325#31357325）を参照してください。リフローを強制する実用的なソリューションです。 –

ipadをポートレートからランドスケープに回転させるとき、divは同じ幅のままです。

答えて

関連する問題