css3 +html5+js モバイル Web ページのレイアウトの問題 (WeChat で使用) 2 つの問題_html/css_WEB-ITnose

1. 画面の中央に div 表示を作成する方法.... これはページの中央ではなく、画面の中央です
説明:

position:absolute;left:50%;top:50%;margin-top:-25%;margin-left:-25%(或者margin个具体的像素值的负数)//又如下面的:  var h = document.body.clientHeight; $("#update_info").css({ 'top': h/2 });

上記のコードはページの中央にのみ移動します...
私 今、いくつかの折りたたまれた UL があり、それぞれの折りたたまれた UL には多くのコンテンツが含まれています。それらをすべて開くと、高さは 1820 ピクセルになります
しかし、たとえば、携帯電話の高さは 500 です。 ; 上記のコードを押すと、910 になります。彼は電話画面の中央にまったくいません。これについてはどうすればよいですか?

2 ページ上にマスクレイヤーを作成するにはどうすればよいですか?
私のアイデアは次のとおりです。絶対位置、長さと幅が 100% の半透明の背景を持つ div を作成し、この div 内に必要なタグを置きます。 。 。
こうすると、このマスクレイヤーのdivが表示されたときに他のdivが隠れてしまい、他のdivのラベルをクリック等の操作ができなくなります。
この方法でテストしたところ、1 つの携帯電話では問題なく、もう 1 つの携帯電話では他の div をクリックできることがわかりました。これは、モバイル ブラウザーのコアが Webkit であることを意味しません (携帯電話はそれほど古いものではありません)。 、システムはすべて 4.0 以降ですが、クリックできるピクセルが 1 つだけ低くなります)
これはなぜですか?こちら側がマスクレイヤーの div です

 <div id="update" style="display:none;background:rgba(0,0,0,0.5); position:absolute; width:100%; top:0; left:0;width:100%;height:100% ">  <div id="update_info" style="width:80%; height:140px; background-color:White; text-align:center; position:absolute;left:10%;top:50%;margin-top:-75px;"> <div style="width:80%; margin-left:auto; margin-right:auto; margin-top:25px; margin-bottom:0px; text-align:left;">  <input id="txtValue" type="text"/>  <asp:DropDownList ID="ddlNational" runat="server" style=" display:none; width:100%;">  </asp:DropDownList>  </div>  <div style="width:80%; margin-left:auto; margin-right:auto; margin-top:25px; padding:0px;">  <a href="javascript::" class="button"  onclick="updateInfo()">修改</a>   <a href="#" class="button"  onclick="close_dlg();">取消</a>   </div>  </div>        </div>

ディスカッションへの返信 (解決策)

1. 画面に対して中央に配置します 実際に、アプリケーションのシーンを観察すると、 、中央のコンテンツが画面より小さい (これは暗黙の条件です)

top:50%; margin-top:-25% これは問題ありません

しかし、コンテンツが画面サイズを超えている場合でも、中央に配置する必要がありますか?それ？現時点では強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認します。

1. 画面を基準にして中央に配置します。実際、アプリケーションのシナリオを観察すると、中央に配置されたコンテンツは画面よりも小さくなります (これは暗黙の条件です)

margin-top:-25 % これで問題ありません

ただし、コンテンツが画面サイズを超えています。それでも中央に配置しますか?現時点では強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認します。

それは IE ではなく、携帯電話のブラウザです... いくつか試してみましたが、問題なく動作しました。下の要素はクリックできます。不透明効果を試しましたが、うまくいきませんでした。
固定は大丈夫です、固定はあまり使いません。それ

1. 画面に対して中央揃え 実際、アプリケーション シナリオを観察すると、コンテンツは画面よりも小さくなります (これは暗黙の条件です)

top:50%; -25% これは問題ありません

しかし、コンテンツが画面サイズを超えている場合でも、中央に配置する必要がありますか?現時点では、強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認できます。


それは IE ではなく、携帯電話のブラウザです... いくつか試してみましたが、問題なく動作しました。下の要素をクリックできます。不透明効果を試しましたが、うまくいきませんでした。

今後会うときにも注意してください。

1. 画面を基準にして中央に配置します 実際にアプリケーションのシナリオを観察します 中央に配置されたコンテンツは画面よりも小さいです (これは暗黙の条件です)

top:50%; margin-top:-25% これは OK です

しかし、コンテンツが画面サイズを超えている場合でも、コンテンツを中央に配置する必要がありますか?現時点では強制的にセンタリングを行うことはできないと思います。位置を変更する必要があります

2. 透明なレイヤーを透過できる場合は、背景を不透明 (#fff) に変更して、透過できるかどうかを確認します。


それは IE ではなく、携帯電話のブラウザです... いくつか試してみましたが、問題なく動作しました。下の要素をクリックできます。不透明効果を試しましたが、うまくいきませんでした。

携帯電話のモデルを共有してください
今後会うときに注意してください
私が持っているのはZTEのu930です。 。 。 Android 4.03... WeChat 経由でアクセスする Web アプリを作成しています...

現在まだ問題があります... 先に投稿します