由于视图宽度，移动设备会拉伸屏幕的 div

Posted 2023-03-11

技术标签:

【中文标题】由于视图宽度，移动设备会拉伸屏幕的 div【英文标题】：Mobile stretches div of screen due to viewwidth 【发布时间】：2016-01-01 15:10:03 【问题描述】：

大家新年快乐！

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

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

对于我的博客文章，我的设想是用户看到的第一件事是div，其高度为 100vh，宽度为 100vw，包含一张图片和一篇博客文章的标题，如下所示：

我关闭了名为“Headline”的div，并打开了一个名为“Content”的新的我希望实际博客文本所在的位置。

我在笔记本电脑、iPad、iPhone 6、5 和 4 上测试了我的网站。后者让我很头疼。一旦我将任何格式添加到“内容”div，之前的div“标题”就会被拉伸超过 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>

【问题讨论】：

如果你有#headline 有一个height: 100vh 而不是min-height:100vh 怎么办？这听起来像是可以解决问题，但不幸的是，它仍然存在。手机会显示预期的渲染半秒钟，然后它会立即伸展。还是觉得不解 【参考方案1】：

因此，由于并非所有浏览器都以相同的方式解释我们的代码，甚至在这种情况下，有些浏览器甚至没有一些较新属性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>

【讨论】：

这听起来像是可以解决问题，但不幸的是，它仍然存在。手机会显示预期的渲染半秒钟，然后它会立即伸展。将其更改为 max-height 也不能解决问题。仍然感到困惑！您的页面中有 javascript 吗？尝试使用!important 设置属性，如下所示：height: 100vh!important 我还没有javascript。无论如何我都试过了，但它没有帮助。我真的迷失了，我要的这种设计应该如此简单，它所建立的骨架也是如此。

以上是关于由于视图宽度，移动设备会拉伸屏幕的 div的主要内容，如果未能解决你的问题，请参考以下文章

移动端项目总结

VW结合rem进行移动端布局

如何计算移动设备的宽度和高度

使用 flex order 属性重新排列桌面和移动视图的项目

防止屏幕外的div调整大小