固定サイドバーをフィーチャーしたWebページのデスクトップバージョンをモバイル版に変換する方法は？
https://stackoverflow.com//questions/20025358
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russian質問
私は、ユーザーがページを越えて垂直にスクロールするときに表示されたままのリンクのサイドバーを備えたWebページを持っています。どうやって私は
になることができます- 合理的な方法でモバイルデバイスの画面に合わせてページを取得します（例えば、画面を水平に埋めるためのサイズ変更）と
- 垂直方向にスクロールするときにサイドバーが表示されたままのデザインを維持しますか？
現在の実装では、コンテンツはモバイルデバイスの画面を埋めるためにサイズ変更されず、ユーザがズームインする（2つの標準のAndroidブラウザでテスト済み）ズームインすると、サイズバーは妥当な位置にそれ自身を存在しない。実装に関するその他のコメントや批判は大歓迎です。おかり！：）
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>website 1</title>
<style type="text/css">
@font-face {
font-family: 'FuturaLTBold';
src: URL(http://dropcanvas.com/6qfw8/1);
}
@font-face {
font-family: 'FuturaLT';
src: URL(http://dropcanvas.com/ulurh/1);
}
body, html{
margin: 0;
padding: 0;
background: #c0c0c0;
color: #000000;
font-family: FuturaLT;
font-size: 15px;
line-height: 1.5;
text-align: justify;
}
h1 {
margin: 0;
}
h2 {
margin: 0;
}
a:link {
color: #CB4C2F;
text-decoration: none;
}
a:visited {
color: #CB4C2F;
}
a:active, a:hover {
color: #b60a00;
}
}
#line_1 {
size: 500px;
border-top: 1px solid #000000;
}
#line_2 {
size: 500px;
border-top: 1px solid #c0c0c0;
}
.button_1 {
width: 100px;
height: 100px;
background-color: #c0c0c0;
border: 1px solid #c0c0c0;
display: inline-block;
color: #000000;
font-size: 12px;
text-align: left;
white-space: normal;
font-family: FuturaLT;
font-weight: bold;
padding: 10px 10px;
text-decoration: none;
text-shadow: 0px 0px 0px #c0c0c0;
}
.button_1:hover {
color: #c0c0c0;
background-color: #000000;
border: 1px solid #000000;
}
.button_1:active {
position: relative;
top: 0px;
background-color: #c0c0c0;
border: 1px solid #c0c0c0;
color: #000000;
}
#wrap_1 {
width: 600px;
margin: 0 auto;
background: #5c5c5c;
}
#header_1 {
padding: 5px 10px;
background: #dddddd;
border-top: 1px solid #5c5c5c;
border-bottom: 1px solid #5c5c5c;
}
#main_1 {
float: right;
width: 450px;
padding: 10px;
background: #dddddd;
min-height: 744px;
}
#sidebar_1 {
position: fixed;
float: left;
width: 130px;
padding: 0px;
background: #5c5c5c;
text-align: center;
}
#footer_1 {
clear: both;
padding: 5px 10px;
background: #dddddd;
border-top: 1px solid #5c5c5c;
border-bottom: 1px solid #5c5c5c;
}
@media (max-height: 790px) {
#sidebar_1 {
position: relative;
}
}
</style>
</head>
<body>
<div id="wrap_1">
<div id="header_1"><h1>WEB SITE TITLE</h1></div>
<div id="main_1">
The signal strengthens. The noise fades. Forecast becomes nowcast.<br>The model and I are one.<br>
<br>
quick links:<br>
- <a href="http://www.gnu.org/">The GNU Operating System</a><br>
- <a href="http://www.wikipedia.org/">Wikipedia</a><br>
- <a href="http://www.timecube.com/">Time Cube</a><br>
<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mauris urna, pretium vel vulputate quis, lacinia vitae sem. Nam rhoncus vestibulum felis non posuere. Ut fermentum ligula lacus, id vehicula sem auctor in. Morbi eleifend placerat mauris, eu egestas risus consectetur ac. Aliquam in odio eu mauris condimentum tempus id nec augue. Ut facilisis magna placerat, mattis sapien a, pulvinar nisl. Sed consectetur justo et lacus tempus accumsan.
Nullam aliquam risus a arcu adipiscing ullamcorper. Mauris felis felis, sollicitudin eu venenatis nec, fringilla eget ligula. Praesent eget venenatis ipsum. Duis vehicula mollis erat, sed bibendum mi commodo quis. Proin euismod viverra odio. Phasellus ut consectetur ligula, a tincidunt sem. Nullam commodo lectus sit amet turpis ullamcorper, ut blandit erat rhoncus. Sed adipiscing odio elementum sodales scelerisque. Curabitur vel scelerisque urna. Integer et cursus erat, sit amet gravida eros. Mauris porttitor egestas elit eget blandit. Maecenas sit amet dictum libero. Sed varius laoreet sapien at laoreet.
Nullam non luctus erat. Morbi dui erat, ultrices non ligula quis, facilisis vestibulum quam. Nulla ante erat, rutrum et nunc et, rhoncus hendrerit nibh. Maecenas in laoreet nibh, id condimentum erat. Proin sit amet urna porta, consequat tellus hendrerit, euismod enim. Ut volutpat dapibus turpis eget tempor. Aliquam urna velit, lacinia vel convallis at, consequat sed felis. Donec interdum ullamcorper dui, vitae posuere velit iaculis vitae. Nunc varius lectus id est gravida suscipit.
Etiam imperdiet ante in accumsan gravida. Fusce pellentesque arcu ut metus facilisis, non congue risus ultrices. Cras et leo gravida, hendrerit lectus sed, dictum urna. Praesent ultrices sapien nec purus consequat, quis aliquam velit pellentesque. Morbi pretium eget massa quis adipiscing. Quisque tortor erat, faucibus at imperdiet eu, ultricies sit amet risus. Phasellus sed urna a ligula hendrerit sagittis. In quis ligula enim. Morbi tortor purus, adipiscing sed arcu ut, tempor dictum lectus. Donec neque felis, tincidunt sit amet mollis sed, mollis at elit. Etiam enim odio, consequat id gravida at, faucibus id erat. Donec a sapien sit amet massa vestibulum fringilla. Phasellus viverra adipiscing neque. Etiam a risus justo.
Vivamus mollis urna et massa semper, vestibulum semper eros mattis. Sed pharetra ultrices nulla ac pulvinar. Duis feugiat in massa ac ornare. Etiam rhoncus ut sapien vel consectetur. Donec nec erat in urna molestie pellentesque. Aenean laoreet lorem ut quam vehicula scelerisque. Vivamus condimentum, dolor vitae fringilla viverra, lorem odio pulvinar leo, ac vestibulum turpis risus eget nunc. Donec faucibus neque sit amet eleifend pulvinar. Aenean nibh felis, fringilla sed purus aliquet, cursus dapibus enim. Vestibulum in massa vitae eros blandit gravida sit amet ut erat. Ut lobortis metus ut neque iaculis laoreet. Praesent eget varius enim, at bibendum elit.
Ut dapibus lacus at nibh pharetra aliquet. Morbi felis purus, aliquam in nulla ac, aliquam tempus eros. Donec facilisis mi diam, eu accumsan mi vehicula sit amet. Maecenas blandit lorem eget tincidunt ultricies. Sed lectus metus, ullamcorper eu ipsum vitae, vulputate iaculis enim. Integer ultrices nulla sit amet felis porta imperdiet. Sed suscipit, est ac iaculis posuere, sapien orci auctor leo, quis egestas diam nunc quis neque. Nam diam ligula, eleifend sed quam luctus, adipiscing pretium dolor.
Quisque placerat semper tristique. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur ultricies lorem non tempor pharetra. Sed ut mauris iaculis nunc suscipit vulputate sed vitae lorem. Sed vehicula erat erat, non varius turpis mollis at. Sed eget velit adipiscing, accumsan diam a, condimentum nisi. Maecenas lacinia sed purus non tempor. Nulla nec elit semper, rutrum eros et, interdum mauris. Praesent enim risus, consequat at feugiat vitae, aliquam eget magna. Ut semper elementum tortor non bibendum. Pellentesque fermentum sapien ipsum, sed dapibus tortor vulputate eget. Nullam gravida augue vitae risus imperdiet, non tristique nunc ultrices. Duis vehicula in magna eget vestibulum. Quisque nec lectus sed sapien viverra venenatis eu ut ante.
</div>
<div id="sidebar_1">
<br>
<input value="HOME" onclick="location.href='index.html';" type="button" class="button_1"><br><br>
<input value="RESOURCES" onclick="location.href='resources.html';" type="button" class="button_1"><br><br>
<input value="LABORATORY NOTEBOOK" onclick="location.href='laboratory_notebook_1.html';" type="button" class="button_1"><br><br>
<input value="WEBLOG" onclick="location.href='weblog.html';" type="button" class="button_1"><br><br>
<input value="PUBLICATIONS" onclick="location.href='publications.html';" type="button" class="button_1"><br><br>
<input value="LINKS" onclick="location.href='links.html';" type="button" class="button_1"><br><br>
<hr class="line_2" border=0 size=0>
</div>
<div id="footer_1">
</div>
</div>
</body>
</html>
解決
携帯電話では、たぶんのリンクを常に見えるように十分なスクリーンの不動産がありません。また、position: fixed要素に問題があり、古いAndroidブラウザの一部も同様にしています。
水平メディアクエリは、width: 100%の#wrap_1を使用した短い回答です。
<head>セクションのMETAタグを必要とします.<meta name="viewport" content="width=device-width, initial-scale=1.0">。これにより、サイトがズームアウトされなくなり、それでもユーザーが必要に応じてズームインすることができます。
所属していません StackOverflow
