2012-07-18 9 views
5

私は自分のウェブサイトを持っていて、それはどこでもうまく見えますが、私はAndroidのプロのコーダーではありません。私はそれが持っている余分な癖を知らないし、私は本当に知る必要がある鍬がよく分からない。 IEのための条件付きコメントのようにそれを単一にする方法はありますか?Androidで絶対位置を固定する

Here is my websiteとなり、バナーとロゴが画面の左側に表示されます。私は三星銀河3を持っており、これは私のバナーがそれに似ています。

enter image description here

なぜこれが起こっている今、私は、彼らは両方の絶対配置されていると明らかにmargin-leftが、それは画面をオフに行く作っているからだと、実感。しかし、私はそれを変更することはできませんすべての通常のデスクトップブラウザのレイアウトを破壊することはありません。

#site-title { background: url(img/heavensgate-logo.jpg) no-repeat; width: 229px;height: 297px; position: absolute; top: 0px; left: 50%; margin-left: -438px; z-index: 2; border: 0px; text-indent: -9999px; } 

#banner { position: absolute; top: 165px; width:868px; left: 50%; margin-left: -448px; z-index: 1; padding: 15px; background-color: 
#fff; border: 1px solid #b4b4b4; } 



<h1 id="site-title"><span><a href="http://heavensgatewinery.ca/" title="Heavens Gate Winery" rel="home">Heavens Gate Winery</a></span></h1> 

    <div id="banner"> 
    <img src="http://heavensgatewinery.ca/wp-content/uploads/banner8.jpg" style="position: absolute; visibility: hidden; top: 0px; left: 0px; border: 0px none;"> 
    </div> 

Androidで動作させるためのバナーとロゴの取得方法については混乱しています。どんな助けもありがとうございます。

+0

別のモバイルサイトを作成し、アンドロイドブラウザを使用しているユーザーをモバイルサイトにリダイレクトすることを検討しましたか? – psubsee2003

+0

divタグでコンテンツをラップし、スタイル 'position:relative;'を適用するとかなり確実ですこれらのdivタグには、絶対的な配置が適切に機能します。今はデバイスでこれをテストすることはできませんので、答えとして投稿したくありません。 –

+0

@ psubsee2003 - ちょっとしたアラインメントの問題でモバイル版を作るために、まったく新しいウェブサイトや追加のコーディングをしたいとは思っていません。しかし、私はモバイル機器のウェブサイトの専門家ではないことが良い練習です – kia4567

答えて

7

ここに記載されている問題はありませんが、Androidブラウザには絶対配置に関する別の問題があります。 絶対に位置付けられたDIVは消える。見つかっソリューションPaweł Komarnicki-webkit-backface-visibility: hiddenです:

<div style="position: relative"> 
    <div style="position: absolute; -webkit-backface-visibility: hidden"> 
    </div> 
</div> 
+0

この回答は質問に戻るのではなく、投票してください – msmfsd

7

絶対配置で要素を配置する必要がある場合は、ほとんどの場合、相対配置要素内で配置する必要があります。

<div style="position:relative;"><div style="position:absolute;"></div></div> 
0

私の問題は、他の答えがない限り、左というのが私のAndroid(サムスン)にあります。%で0を配置するために行く:PXに右の位置を与える(絶対)が左サイドたとえたとえ 左:10ピクセル; 左:20%; は0の位置に移動しますが、calc()はleft:では動作しませんが、制限された方法で幅で動作します。

だから、Androidでは、%は左には動かないと思います。だから私は上記の問題が残ったと思った:50%が問題だった、私はそれが相対的/絶対的な位置で解決されたのだろうと思っている。私は同じことをしましたが解決策はありませんでした! -webkit-backface-visibilityを使用しても違いはありません!

解決策:左の代わりに:17%、左を使用:calc(17%)および左の固定px:撮影されますが、%は機能しません!