0

我有一个网页，其中包含一个侧边栏链接，当用户垂直滚动页面时，该边栏应该保持可见。我怎么能

  • 以合理的方式使页面适合移动设备的屏幕（例如，调整大小以水平填充屏幕）和
  • 保持垂直滚动时侧边栏保持可见的设计？

在当前实现中，内容不会调整大小以填充移动设备的屏幕，并且当用户放大时，尺寸栏不会出现在合理的位置（在两个标准的 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>
4

1 回答 1

2

在移动设备上，您可能没有足够的屏幕空间来始终保持一堆链接可见。此外，iOS 在position: fixed元素方面存在问题，我相信一些较旧的 android 浏览器也存在问题。

水平媒体查询是简短的答案，带有width: 100%on #wrap_1。

您还需要该<head>部分中的元标记：<meta name="viewport" content="width=device-width, initial-scale=1.0">。这将强制网站不缩小，但仍允许用户在需要时放大。

于 2013-11-17T00:36:51.403 回答