Question

我正在创建一个只有一页的网站。但是，页面顶部有一个占据屏幕高度100％的div来创建整页效果。一切都运行正常，但在移动设备上，100％高度div中的任何文字的字体大小都在减少。我之前发过这个问题，但是这次我一直在做更多的研究。

这是我写的代码：

h1{
    text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);
}
html {
    height: 100%;
    min-height: 100%;
}
body {

    background: #1A3742;
    font-family: 'Source Sans Pro', sans-serif;
    color: white;
    margin: auto 100px;
    height: 100%;
}
#header {
    background: gray;
    padding: 28px 0 26px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;

}

#top{
    text-align: center;
    height: 100%;

}
#home-content{
    position: relative;
    top: 50%;
    transform: translateY(-50%);
}
a[href="#top"] {
    margin-left:100px;
    margin-right:50px;
    vertical-align: middle;
    text-decoration: none;
    font-weight: bold;
}
a img{
   vertical-align:middle;
}
.content {
    margin-left:75px;
    margin-top:25px;
    overflow: hidden;
}
.content p{
    margin-top: 0px;
}

<!DOCTYPE html>
<html>
<head>
	<title></title>
    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700' rel='stylesheet' type='text/css'>
	<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
    <header id="header"> 
        <a href="#top">Name</a>
        <a href="">
            <img src="" alt="img" height="24" width="24">
        </a>
    </header>

    <div id="top">  
        <div id = "home-content">
            
            <h1>Top</h1>
            <h2>Sub title</h2>
            <p>
            This text does not scale at all.
            </p>
        </div>
    </div>
    <div id="section1"> 
        <h1>Section 1</h1>
        <div class = "content">

        <p> 
        This scales with the screen.
        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
        quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

        </p>

        </div>
    </div>
</body>
</html>

以下是使用Chrome设备模式和Galaxy S5的示例。注意，我向下滚动了一下，以便您可以看到着陆部分的文本和第1部分的文本。

Top的字体大小应与第1节的字体大小相同。

如果我删除#top中的行：

    height: 100%;

顶部的字体大小不会改变：

我知道我使用的是默认字体大小，但我不希望这会导致问题。在此处使用Chrome Inspector的字体大小为：

HTML - 16px
身体 - 16px
Div id = top - 16px
h1（在#top内） - 32px
Div id = section1 - 16px
h1（＃section1内） - 42.6667px

h1的字体大小为2em。因此，32px for Top有意义，但是，42.6667px没有。我的笔记本电脑上没有使用任何网络浏览器，只有移动设备。我实际上更喜欢手机上的42.6667px，因为它更符合条件。但是，我希望字体大小匹配。

因为当删除div height = 100％时，＃top div的字体大小很好，所以我决定使用jQuery和margin来创建相同的整页效果。

var winHeight = $(window).height();
var topHeight = $('#top').outerHeight(true);
$('#top').css({
    'marginTop':(winHeight/2)-topHeight
    ,'marginBottom':(winHeight/2)//-topHeight
});

但是，我真的不想这样做。

那么，有没有办法让#top字体大小与＃section1字体大小匹配？

Answer 1

您正在制作自适应网站，但尚未配置视口。关于它的重要链接here但基本上是：

如果没有视口，移动设备将以典型的桌面屏幕宽度呈现页面，缩放以适合屏幕。

因此，使用100％的高度和Chrome的设备模式渲染高度比它大得多，你就得到了小文本。

将以下内容添加到头部将使您的网站在移动设备上正常显示：

<meta name="viewport" content="width=device-width, initial-scale=1" />

但是，您需要进行一些更改，因为您身体任何一侧的100px边距都会将您的内容整理成一个细长的列。

字体大小减小div设置为高度100％

1 个答案: