位置：固定と幅100％in ios

私はページの上部に固定された要素を持っていて、水平にスクロールするとあなたとスクロールします。位置：固定と幅100％in ios

しかし、メニューの幅は100％のビューポート幅ではありません。メニューの幅は900pxです。

問題が何ですか？私はJSで幅を設定することができますが、それは真実ではありません。 Android搭載端末では大丈夫です。

body 
 
{ 
 
    padding: 0; 
 
    margin: 0; 
 
} 
 

 
.menu 
 
{ 
 
    position:fixed; 
 
    width: 100%; 
 
    top: 0; 
 
    left: 0; 
 
    background-color: grey; 
 
    color: #fff; 
 
} 
 

 
.content800 
 
{ 
 
    width: 800px; 
 
    height: 200px; 
 
    background: green; 
 
} 
 

 
.content900 
 
{ 
 
    width: 900px; 
 
    height: 200px; 
 
    background: blue; 
 
}

<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> 
 
</head> 
 
<body> 
 
    <div class='menu'>Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2 Menu 1 Menu 2</div> 
 
    <div class="content800"></div> 
 
    <div class="content900"></div> 
 
</body> 
 
</html>

どのように私は、デバイスの画面の100％で固定メニューの幅を設定することができますか？

出典

2016-04-13 user3563581

.content800と.content900のためにページがオーバーフローする可能性が高いため、レスポンシブデザインを使用する場合は、デバイスの解像度を縦横に超えた「固定」幅を設定しないでください。ビューポートはHTMLに設定されていますが、CSSにメディアクエリはありません。

@media screen and (max-width: 63.9375em) { 
.content800, .content900 { 
    width:100%; 
    } 
}

あなたは、そのすべての小さな両方の景観内のデバイス、肖像画や肖像画でもタブレットとしてお好みに合わせて63.9375emを変更する必要があります。

は、あなたは本当にこのようなものを使用してメディアクエリを利用するために必要モード。それでも問題が解決しない場合は、CSSやHTMLのように、添付できなかったことがあります。

出典

2016-04-13 18:52:16

right: 0;〜.menuに設定すると、画面全体の幅がメニューに表示されます。

出典

2016-04-13 18:54:07

問題に対処するのではなく、バンドの助けが必要です。私のお金は、900pxの固定幅がポートレートモードでiPhone 2、3、4、5、6を超え、オーバーフローを引き起こすという事実にあります。 –

位置：固定と幅100％in ios

答えて

関連する問題