iPhone文本位置问题答案

【问题标题】：Iphone Text Position IssuesiPhone文本位置问题
【发布时间】：2015-06-03 14:58:31
【问题描述】：

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

我的问题是文本“仍在处理中”。在测试的各种笔记本电脑/台式机屏幕和安卓手机上，我对它没有任何问题，整个文本字段都居中。但是在iphone上，我假设它将字符串“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

【问题讨论】：

标签： html css iphone viewport-units

【解决方案1】：

我不确定它是否会在您的手机上修复它，但请尝试取出 left:51% 和 .bc h1 css 上的 transform 属性，然后添加一个 width:100%

【讨论】：

我试了一下，它解决了我的 Iphone 问题，但现在我的文本在 Android 和台式机上没有正确对齐。它似乎离开了屏幕的最左侧。 imgur.com/0sVkwvD
嗯，您介意更新您的网站以便我看一下吗？现在只看您的网站，我在 chrome 中进行了这些更改，您的文本仍然居中。你用的是什么浏览器？
我刚刚更新了它 - 以及桌面/安卓上的 Chrome。 Iphone 上的 Safari
我在你的宽度上显示一个错误：你添加了 100%，看起来你可能忘记添加分号“;” 100% 之后，您的变换属性仍然存在
看来我没有通过删除转换属性，现在解决了。非常感谢:)