个人中心
gpt4 book ai didi

html - 由于 View 宽度，移动设备会拉伸(stretch)屏幕的 div

转载 作者：行者123 更新时间：2023-11-28 03:01:19 25 4
gpt4 key购买 nike

大家新年快乐!

我在 Stack Overflow 上的第一个问题。

我正在尝试为自己构建一个简单的博客，并且我正在尽最大努力使其对大多数设备具有响应能力。但是 iPhone 4 让我很头疼。

对于我的博客文章，我设想用户首先看到的是一个高度为 100vh 宽度为 100vw 的 div，其中包含图像和博客文章的标题，像这样:

我关闭了名为“标题”的 div，并打开了一个名为“内容”的新内容，我希望在其中显示实际的博客文本。

我已经在笔记本电脑、iPad、iPhone 6、5 和 4 上测试了我的网站。后者让我很头疼。一旦我向“内容”div 添加任何格式，之前的 div“标题”就会被拉伸(stretch)超过 100vh，因此您必须滚动很远在文章正文开始之前。更令人困惑的是错误似乎不一致。重新加载页面会给我不同的结果，有时，如果我经常刷新它，它偶尔会按预期显示。这是它有时看起来像的示例:

我到处寻找解决方案，但我就是不知道自己做错了什么。我会喜欢一些帮助。这是我认为相关的 HTML 和 CSS，如果您需要更多信息，请告诉我。

* {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    vertical-align: baseline;
    border: none;
    font-weight: normal;
}

html, html a {
    font-size: 10px;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
}

html {
}

body {
}

a {color: inherit;}
a:visited {text-decoration: none; color: inherit;}

#namelogo p {
    padding-left: 1rem;
    padding-top: 1rem;
    font-size: 3rem;
    color: white;
    text-align: left;
}

#namelogo a {
    font-size: 3rem;
     -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

#namelogo a:hover {
    text-shadow: 1px 1px 20px #fff;
}

#headline {
    position:relative;
    min-height: 100vh;
    max-width: 100vw;
    background-color: black;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#layer {
    min-height: inherit;
    width: inherit;
}

#vertical-align {
    position: absolute;
    top: 52%;
    -moz-transform: translateY(-52%);
    -ms-transform: translateY(-52%);
    -webkit-transform: translateY(-52%);
    transform: translateY(-52%);
    width: 100%;
}

.posttitle {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    color: white;
    font-size: 4rem;
    line-height: 90%;
    font-family: "Crimson Text", "Georgia", serif;
}

.postinfo {
    padding-top: 1.3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
    font-family: "Crimson Text", "Georgia", serif;
    color: white;
    font-size: 1.3rem;
}

#content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#content h1 {
    font-family: "Crimson Text", "Georgia", serif;
    color: #353535;
    font-size: 2.8rem;
    line-height: 3.4rem;
    padding-top: 8rem;
    padding-bottom: 4.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

#content h2 {
    font-family: "Crimson Text", "Georgia", serif;
    color: #333333;
    font-size: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

#content p {
    font-family: "Crimson Text", "Georgia", serif;
    color: #353535;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 2.3rem;
    word-wrap: break-word;
}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href='https://fonts.googleapis.com/css? family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
</head>

<body>
        <div id="headline" style="background-image: url(https://images.unsplash.com/photo-1449710146567-1e282fa41f2f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c1bffcef22907f217af2fdbc3e430855);">
        <div id="layer" style="background-color: rgba(0,0,0,0.4)">
            <div id="namelogo">
                <p><a href="../index.html">Peter Dam</a></p>
            </div>
                <div id="vertical-align">
                    <h1 class="posttitle">Why the Unfamiliar is Frightening and Why You Should Face It Anyway</h1>
                    <p class="postinfo">January 4, 2016 &bull; 13 minute read &bull; by Peter Dam</p>
                </div>
        </div>
        </div>

        <div id="content">
            <h1>I have never done this before. My decision to pursue a future as a writer came as a surprise to myself. When I tell people about it—especially that it will revolve around a blog—I typically receive a sympathetic, concerned smile. A smile that tells me they think it's an appealing ambition, but also naïve.</h1>
            <p>
I often find myself procrastinating and postponing the act of sitting down to write. My mind is mostly on how much better the other writers are, and I feel hesitant to begin. Instead, I convince myself that it's more logical to finish designing my website first, or to read an article about how to write well.
<br><br>    </p>
        </div>

        <div id="footer">
            <p> &#169; 2016 Peter Dam. All rights reserved.</p>
        </div>
</body>
</html>

最佳答案

因此，由于并非所有浏览器都以相同的方式解释我们的代码，更糟糕的是，在这种情况下，有些浏览器甚至没有一些较新的属性 Viewport H/W即 vh/vw，有时为其中一些浏览器设置回退是个好主意，因此设置此项可能会有所帮助，希望它有所帮助。

另外，我不知道你是否打算让 headline 为 min-height 意味着它可以 更高 所以如果您也尝试设置它的 height: 100vh 会发生什么。

body{
height:100%; 
width: 100%
}

#headline{
height: 100%;
height: 100vw;
/* rest of your code . . . */
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    text-decoration: none;
    vertical-align: baseline;
    border: none;
    font-weight: normal; 
}

html, html a {
    font-size: 10px; 
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
} 

html {
}

body {
    height: 100%;
    width: 100%
}

a {color: inherit;}
a:visited {text-decoration: none; color: inherit;}

#namelogo p {
    padding-left: 1rem;
    padding-top: 1rem;
    font-size: 3rem;
    color: white;
    text-align: left;    
}

#namelogo a {
    font-size: 3rem;
     -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
}

#namelogo a:hover {
    text-shadow: 1px 1px 20px #fff;
}

#headline {
    position:relative;
    height: 100%;
    height: 100vh;
    max-width: 100vw;
    background-color: black;
    background-position: center;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

#layer {
    min-height: inherit;
    width: inherit;    
}

#vertical-align {
    position: absolute;
    top: 52%;        
    -moz-transform: translateY(-52%);
    -ms-transform: translateY(-52%);
    -webkit-transform: translateY(-52%);
    transform: translateY(-52%);
    width: 100%;
}

.posttitle {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    text-align: center;
    color: white;
    font-size: 4rem;
    line-height: 90%; 
    font-family: "Crimson Text", "Georgia", serif;
}

.postinfo {
    padding-top: 1.3rem;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: center;
    font-family: "Crimson Text", "Georgia", serif;
    color: white;
    font-size: 1.3rem;
}

#content {
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

#content h1 {
    font-family: "Crimson Text", "Georgia", serif;
    color: #353535;
    font-size: 2.8rem;
    line-height: 3.4rem;
    padding-top: 8rem;
    padding-bottom: 4.5rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

#content h2 {
    font-family: "Crimson Text", "Georgia", serif;
    color: #333333;
    font-size: 2.5rem;
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 2rem;
    padding-right: 2rem;
}

#content p {
    font-family: "Crimson Text", "Georgia", serif;
    color: #353535;
    padding-left: 2rem;
    padding-right: 2rem;
    font-size: 2.3rem;
    word-wrap: break-word;
}
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <link href='https://fonts.googleapis.com/css? family=Crimson+Text:400,400italic,600,600italic,700,700italic' rel='stylesheet' type='text/css'>
</head>

<body>
        <div id="headline" style="background-image: url(https://images.unsplash.com/photo-1449710146567-1e282fa41f2f?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&s=c1bffcef22907f217af2fdbc3e430855);">
        <div id="layer" style="background-color: rgba(0,0,0,0.4)">  
            <div id="namelogo">
                <p><a href="../index.html">Peter Dam</a></p>
            </div>
                <div id="vertical-align">
                    <h1 class="posttitle">Why the Unfamiliar is Frightening and Why You Should Face It Anyway</h1>
                    <p class="postinfo">January 4, 2016 &bull; 13 minute read &bull; by Peter Dam</p>    
                </div>            
        </div>
        </div>
    
        <div id="content">
            <h1>I have never done this before. My decision to pursue a future as a writer came as a surprise to myself. When I tell people about it—especially that it will revolve around a blog—I typically receive a sympathetic, concerned smile. A smile that tells me they think it's an appealing ambition, but also naïve.</h1>
            <p>
I often find myself procrastinating and postponing the act of sitting down to write. My mind is mostly on how much better the other writers are, and I feel hesitant to begin. Instead, I convince myself that it's more logical to finish designing my website first, or to read an article about how to write well.
<br><br>    </p>
        </div>

        <div id="footer">
            <p> &#169; 2016 Peter Dam. All rights reserved.</p>
        </div>
</body>    
</html>

关于html - 由于 View 宽度，移动设备会拉伸(stretch)屏幕的 div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34557289/

25 4 0
文章推荐： javascript - 如何在本地存储中保存字体大小？
文章推荐： Javascript On 模糊事件
文章推荐： css - 居中的输入类型文本占据整个宽度
文章推荐： asp.net - 如何最好地控制 ASP.NET 中多个 javascript 文件的加载？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com