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; 
    } 
} 

像這樣的事情很明顯，你可以亂與價值觀，讓你的名字呼吸！希望這可以幫助