モバイルデバイスの画面サイズに対してリサイズない:比例的なサイズのマージンは、私は、次のジェイド(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テキストが画面の右端に表示されます私が期待していたように、左から少しインデントされています。
私は、必要に応じてモバイルデバイスと非モバイルデバイスにスクリーンショットを含めることができます。
また、それがために使用され、次のようになります
すぐ上のコードは、非モバイルブラウザで次のように(と同様にモバイルブラウザで):
これは全くうまくいかない。ジェイドが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>
問題を示す[mcve]を作成できますか? –
@MrLister私は持っていると思った。追加または削除することをお勧めしますか?問題の原因はわからないので、MCVを作成するのは少し難しいです.../ –
問題の再現を試みるために使用できる実際のHTMLファイルです。それ以外の場合は、自分でHTMLをいくつか作り上げる必要があります。私のHTMLはそうではないので、助けにならないと言います。 –