2016-09-04 6 views
0

モバイルデバイスの画面サイズに対してリサイズない:比例的なサイズのマージンは、私は、次のジェイド(HTMLテンプレートエンジン)を介して作成されたテキストのセクションを持っている

header 
    div(class="header-logo") Order Of The Mouse: 
    div(class="header-phase") Phase 1.7 -- 
    div(class="header-title") Operation Silk Scarf 

これは、以下のCSSを使用してスタイル設定され:

header { 
    background-color: #78B82A; 
    color: #FFF; 
    text-shadow: 2px 2px 2px #000000; 
    text-align: center; 
    height: 115px; 
} 

.header-logo { 
    font: 1.5em Arial, sans-serif; 
    float: left; 
    position: relative; 
    display: inline; 
    margin-left: 1%; 
    margin-top: 7px; 
} 

.header-phase { 
    font: 12px Arial, sans-serif; 
    position: relative; 
    display: inline; 
} 

.header-title { 
    font: 3.4em Arial, sans-serif; 
    position: relative; 
    float: right; 
    top: 10px; 
    left: 12px; 
} 

(私はCSSがちょっと整える必要があることを知っています。それは、疲れているうちに急いで昨晩書かれました)。

私の質問はこれです:左の余白がモバイルデバイスのためにスケールされないのはなぜですか?別のブラウザのラップトップでは大丈夫ですが、ウィンドウのサイズが変更されたときに、アンドロイドデバイスにアクセスすると(もう2つの異なるブラウザを試しました)、divテキストが画面の右端に表示されます私が期待していたように、左から少しインデントされています。

私は、必要に応じてモバイルデバイスと非モバイルデバイスにスクリーンショットを含めることができます。

また、それがために使用され、次のようになります

Earlier today on non-mobile: correct

すぐ上のコードは、非モバイルブラウザで次のように(と同様にモバイルブラウザで):

Now, non-mobile (similar on mobile): not correct

これは全くうまくいかない。ジェイドがHTMLに変換されると

、それが現在のようになります。

<header><div class="header-logo">Order Of The Mouse: </div><div class="header-phase">Phase 1.7 --</div><div class="header-title">Operation Silk Scarf</div></header> 
+0

問題を示す[mcve]を作成できますか? –

+0

@MrLister私は持っていると思った。追加または削除することをお勧めしますか?問題の原因はわからないので、MCVを作成するのは少し難しいです.../ –

+0

問題の再現を試みるために使用できる実際のHTMLファイルです。それ以外の場合は、自分でHTMLをいくつか作り上げる必要があります。私のHTMLはそうではないので、助けにならないと言います。 –

答えて

0

[OK]を、私は新鮮な目で再びその上に見て、これはサイズ変更の問題を解決したかのように見えます:

header { 
    background-color: #78B82A; 
    color: #FFF; 
    text-shadow: 2px 2px 2px #000000; 
    height: 115px; 
} 

.header-logo { 
    font: 1.5em Arial, sans-serif; 
    float: left; 
    position: relative; 
    display: inline; 
    margin-left: 1%; 
    margin-top: 7px; 
} 

.header-phase { 
    font: 14px Arial, sans-serif; 
    position: relative; 
    display: inline; 
    left: 6px; 
    top: 10px; 
} 

.header-title { 
    font: 3.4em Arial, sans-serif; 
    position: relative; 
    top: 12px; 
    left: 80px; 
} 

私が持っていたコードで、昨晩はどのように正しく見えるのか主だけが知っていますが、何とかしました。奇妙な時代。

関連する問題