Comment une version de bureau d’une page Web comportant une barre latérale fixe peut-elle être convertie en version mobile ?
https://stackoverflow.com//questions/20025358
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
J'ai une page Web qui comporte une barre latérale de liens qui doivent rester visibles lorsque l'utilisateur fait défiler verticalement la page.Comment pourrais-je
- faire en sorte que la page s'adapte à l'écran d'un appareil mobile de manière raisonnable (par exemple, elle se redimensionne pour remplir l'écran horizontalement) et
- conserver le design dans lequel la barre latérale reste visible lors du défilement vertical ?
Dans la présente implémentation, le contenu n'est pas redimensionné pour remplir l'écran d'un appareil mobile et la barre de taille ne se présente pas dans des positions raisonnables lorsque l'utilisateur effectue un zoom avant (testé sur deux navigateurs Android standards).D'autres commentaires ou critiques sur la mise en œuvre sont les bienvenus.Merci!:)
<!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>
La solution
Sur mobile, vous n’aurez probablement pas suffisamment d’espace d’écran pour garder un tas de liens visibles à tout moment.De plus, iOS a des problèmes avec position: fixed éléments, et je pense que certains des anciens navigateurs Android le font également.
Les requêtes multimédias horizontales sont la réponse courte, avec width: 100% sur #wrap_1.
Vous avez également besoin d'une balise méta dans le <head> section: <meta name="viewport" content="width=device-width, initial-scale=1.0">.Cela forcera le site à ne pas effectuer de zoom arrière et permettra toujours à l'utilisateur de zoomer si nécessaire.
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
