كيف يمكن تحويل إصدار سطح المكتب لصفحة ويب تحتوي على شريط جانبي ثابت إلى إصدار محمول؟
https://stackoverflow.com//questions/20025358
-
21-12-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
Russianسؤال
لدي صفحة ويب تحتوي على شريط جانبي من الروابط التي يجب أن تظل مرئية أثناء قيام المستخدم بالتمرير عموديًا عبر الصفحة.كيف يمكنني
- جعل الصفحة تتناسب مع شاشة الجهاز المحمول بطريقة معقولة (على سبيل المثال، تغيير حجمها لملء الشاشة أفقيًا) و
- الحفاظ على التصميم الذي يظل فيه الشريط الجانبي مرئيًا عند التمرير عموديًا؟
في التنفيذ الحالي، لا يتم تغيير حجم المحتوى لملء شاشة الجهاز المحمول ولا يظهر شريط الحجم في مواضع معقولة عندما يقوم المستخدم بالتكبير (تم اختباره على اثنين من متصفحات 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>
المحلول
على الهاتف المحمول، ربما لن يكون لديك ما يكفي من مساحة الشاشة لإبقاء مجموعة من الروابط مرئية في جميع الأوقات.أيضًا، يواجه iOS مشكلات مع position: fixed العناصر، وأعتقد أن بعض متصفحات Android الأقدم تعمل أيضًا.
استعلامات الوسائط الأفقية هي الإجابة المختصرة، مع width: 100% على #wrap_1.
تحتاج أيضًا إلى علامة تعريفية في ملف <head> قسم: <meta name="viewport" content="width=device-width, initial-scale=1.0">.سيؤدي هذا إلى إجبار الموقع على عدم التصغير مع السماح للمستخدم بالتكبير إذا لزم الأمر.
لا تنتمي إلى StackOverflow
