Question

Plz我想问一下如何做到以下几点： - 修正所有背景（标题和内容）＆gt;＆gt;＆gt;我做得很好。 - 固定标题，同时内容滚动＆gt;＆gt;＆gt;我做得很好。

但问题是：因为我使用固定的背景图像，固定的标题是透明的;当页面滚动时，内容显示在标题下面（因为它是透明的）.....我试图给标题提供相同的身体背景，它在桌面上运行良好，但它在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;
}

Answer 1

iPad修复

移动Safari（如适用于Android的Chrome，移动版Firefox和IE移动版）会增加宽版块的字体大小（始终如此），这样，如果您双击放大该块（适合该块的块）屏幕宽度），文字清晰可辨。如果设置-webkit-text-size-adjust：100％（或无），它将无法执行此操作，因此当用户双击放大宽块时，文本将非常小;如果用户捏缩放，用户将能够阅读它，但文本将比屏幕更宽，他们必须水平平移才能阅读每行文字！

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

最后，如果您确实需要阻止Mobile Safari调整字体大小，您可以设置-webkit-text-size-adjust：100％，但这只是作为最后的手段，因为它可能会导致移动用户拥有难以阅读你的文字，因为它要么太小，要么在他们阅读的每一行之后都必须从一边到另一边平移。请注意，您必须使用100％而不是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;
}

希望这可以解决您的问题

制作固定标题和可滚动内容

1 个答案: