Iphone 文本位置问题

Question

您好，对于可能遇到的愚蠢问题，我深表歉意，因为我对 HTML 和 CSS 还是很陌生。如果可能，我想避免使用 Javascript 来解决此解决方案。

我的问题是文本 "Still working on it"。在测试的各种笔记本电脑/台式机屏幕和 android 手机上，我对整个文本字段居中没有任何问题。但是，在 iphones 上，我假设它以字符串 "S" 的第一个字母为中心？以下是在 iphone 设备上的外观示例：

下面分别是我的 HTML 和 CSS 代码，如果有人能指导我正确的方向来解决这个问题，我将不胜感激。

<!DOCTYPE html>
<html>
<head>
    <title>Elias Malik</title>
    <link rel="stylesheet" href="main.css">
    <link href="tools/main.css" rel="stylesheet" type="text/css" media="screen" />
    <link href='//fonts.googleapis.com/css?family=Josefin+Sans:600,700|Damion' rel='stylesheet' type='text/css'>
    <meta name="viewport" content="width=device-width, initial-scale = 1.0, user-scalable = no">
    <link rel="shortcut icon" href="diamond.ico">
</head>

    <body>
        <div class="bc">
            <h1>Still working on it</h1>
        </div>

<footer class="mainFooter">
        <div class="socialmediaFooter">
            <a href="https://www.facebook.com/elias.malik.7"><img class="focus" src="facebook.png"</img></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://instagram.com/eliasrmalik"><img class="focus" src="instagram.png"</img></a> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            <a href="https://uk.linkedin.com/in/eliasrmalik"><img class="focus" src="linkedin.png"</img></a> 
        </div>
    </footer>

    </body>
</html>

和

html 
{

background: url("devbc.jpg") no-repeat center center;

min-height:100%;
background-size:cover;
}


body
{

    text-align: center;
min-height:100%;

}

.bc h1
{

    text-align: center;
font-family: "Damion", cursive;
color: white;
font-size: 4.6vmax; 
position: fixed; 
top: 42%;
left: 51%;
transform: translate(-50%, -50%);
    white-space: nowrap;
}


.mainFooter{
width: 100%;
margin: center;
margin: auto;
position: fixed;
bottom: 0;
font-size: 5px;
float: center;
}

img
{

max-height: 10vmax;
max-width: 5vmax;

}

网站是： https://eliasmalik.com

Answer 1

我不确定它是否会在您的 phone 上修复它，但请尝试删除 .bc h1 [=] 上的 left:51% 和转换属性 14=] 而不是添加 width:100%

Iphone 文本位置问题

Iphone Text Position Issues

html

css

iphone

viewport-units