与ios的html标题

Question

我不知道我做错了什么，但当我在iphone上访问我的网站时，标题会在我的名字之间找到一个空格。

在我的电脑上：

在iPhone上

：

* {
    margin 0;
    box-sizing: border-box;
    color: #FFFFFF;
    font-family: "Monaco", "Menlo", "Consolas", monospace;
    text-align: left
}
body {
    padding: 0 1.25em 1.25em 1.25em;
    align-items: center;
    background-color: #1E1E1E;
    display: flex;
    flex-direction: column;
    justify-content: center;
    margin: 0
}
h1 {
    margin: 1.25em 0 0.625em 0;
    font-size: 2em;
    text-align: left;
    word-spacing: -0.188em;
    -webkit-margin-before: 1.25em;
    -webkit-margin-after: 0;
    -webkit-margin-start: 0px;
    -webkit-margin-end: 0px;
}
h1:before {
    color: #2DA2DB;
    content: "#";
}

<h1> Alan Pijak</h1>

Answer 1

是的，您的标题名称所在的部分的宽度太小，无法容纳标题。您可以使用媒体查询更改其宽度，以便在移动设备上更接近屏幕的整个宽度。你共享的代码没有这个元素，但是我们说它被称为.headline-container：

@media screen and (max-width: 600px) {
    .headline-container {
        width: 90%;
    }
}

或者可能更改font-size：

@media screen and (max-width: 600px) {
    .headline-container h1 {
        font-size: 18px;
    }
}

这样的东西显然你可以搞砸价值观，让你的名字呼吸！希望这有帮助