html标题与ios

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容器：

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

也许改变字体大小：

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

像这样的事情很明显，你可以乱与价值观，让你的名字呼吸！希望这可以帮助