0

Plz 我想问一下如何制作以下内容： - 固定所有背景（标题和内容）>>> 我做得很好。- 修复了内容滚动时的标题 >>> 我做得很好。

但问题是：因为我使用的是固定的背景图片，并且固定的标题是透明的；当页面滚动时，内容出现在标题下（因为它是透明的）.....我试过给标题提供与正文相同的背景，在桌面上运行良好，但在iPad上出现异常！这就是为什么我使标题透明然后出现问题的原因。

<div class="myHeader">
    <header>
        <a href="index.php"><img alt="" src="images/bigLogo.png"></a>
    </header>
    <nav>
        <ul>
            <li><a href="index.php">HOME</a> </li>
            <li><a href="about.php">ABOUT</a> </li>
            <li><a href="ceo.php">CEO</a> </li>
        </ul>
    </nav>
</div>

<div class="container"> 
    <p>bla bla bla long text here</p>
</div>


body {
    background-color:#080717;
    background-image: url('../images/fixedBG.jpg');
    background-position: top center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.myHeader {
    position: fixed;
    width: 100%;
    display: block;
    height: 255px;
    top: 0px; 
    z-index: 1;
    text-align: center;
    margin: 0px auto 0px auto;
}

.container { 
    margin: 255px auto 0px auto;
    text-align: left;
    width: 541px;
    position: relative;
}
4

1 回答 1

0

iPad 修复

Mobile Safari（如 Android 版 Chrome、Mobile Firefox 和 IE Mobile）会（始终）增加宽块的字体大小，这样如果您双击以放大该块（使块适合屏幕宽度） ，文本将清晰易读。如果您设置 -webkit-text-size-adjust: 100%（或无），它将无法做到这一点，因此当用户双击放大宽块时，文本将难以辨认；如果用户捏拉放大，用户将能够阅读它，但是文本将比屏幕宽，他们必须水平平移才能阅读每一行文本！

理想情况下，您可以通过使用响应式网页设计技术来解决此问题，使您的设计适应移动屏幕尺寸（在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整您的字体大小）。

最后，如果您确实需要阻止 Mobile Safari 调整您的字体大小，您可以设置 -webkit-text-size-adjust: 100%，但这只能作为最后的手段，因为它可能会导致移动用户难以阅读您的文本，因为它要么太小，要么他们必须在他们阅读的每一行之后从一侧平移到另一侧。请注意，您必须使用 100% 而不是 none，因为 none 在桌面浏览器中具有令人讨厌的副作用。Mobile Firefox 和 IE Mobile 也有等效的 -moz-text-size-adjust 和 -ms-text-size-adjust 属性。

编辑：例如，在您的情况下，最简单的可能是第二种选择，因此您可以尝试添加以下 CSS：

/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
   .newsletter_input {
        width: 320px;
    }
    .newsletter_input #form{
        font-size:42pt
    }
}

虽然像这样硬编码 320px 并不理想；您可以通过使用各种 CSS 媒体查询或从 JavaScript 获取设备宽度来改进这一点。强文本

滚动条修复

CSS 部分

必须设置溢出属性

.myHeader {
    position: fixed;
    width: 100%;
    display: block;
    height: 255px;
    top: 0px; 
    z-index: 1;
    text-align: center;
    margin: 0px auto 0px auto;
    overflow:scroll;
}

希望这可以解决您的问题

于 2013-09-21T01:15:03.427 回答