流动缩放网页在移动设备上不像预期的那样缩放

Question

我创建了一个可以在桌面上适度缩放的网页，所有内容都是窗口高度或宽度的百分比。我不明白为什么网页不能缩放到手机屏幕的大小？ 这里是网站，我已经穿上了托管网站，所以我可以在我的iPhone测试：

http://henryneilson.comli.com/Test/Index.html

HTML可以在链接

CSS在重要的事情上可以看到的是：

@charset "utf-8"; 
body { 
overflow-x: hidden; 
overflow-y: hidden; 
text-align: center; 
margin: 0px; 
height: 100vh; 
top: 0px; 
} 
#FSBG { 
width: 177.77vh; 
height: 100%; 
min-width: 400px; 
min-height: 225px; 
margin-left: 50%; 
-webkit-transform: translateX(-50%); 
-ms-transform: translateX(-50%); 
transform: translateX(-50%); 
} 
#BackgroudDiv { 
height: 100%; 
text-align: center; 
display: block; 
background-color: #161619; 
top: 0px; 
left: 0px; 
right: 0px; 
bottom: 0px; 
width: 3000px; 
position: fixed; 
left: 50%; 
-webkit-transform: translateX(-50%); 
-ms-transform: translateX(-50%); 
transform: translateX(-50%); 
z-index: -100; 
} 
.titletext { 
color: #fff; 
text-shadow: 0px 6px 8px rgba(0, 0, 0, 1); 
font-size: 5vh; 
text-align: center; 
position: absolute; 
top: -3.7vh; 
left: 2%; 
z-index: 10; 
font-family: source-sans-pro; 
font-style: normal; 
font-weight: 100; 
} 
.titlebox { 
width: 100%; 
height: 7vh; 
display: block; 
background-color: #161619; 
margin: auto; 
top: 0px; 
left 0px; 
position: absolute; 
z-index: 10; 
} 

将浏览器缩放到与iPhone相同的分辨率并不能显示iPhone显示的内容（我想让iPhone显示桌面显示的内容），我是否缺少明显的东西？

非常感谢

^h

Answer 1

尝试加入这一行你的HTML头：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

Answer 2

我发现我没有使用所有三种类型的变换，所以Chrome和IE它工作但iPhone所需我使用全部三种：

-webkit-transform: translateX(-50%); 
-ms-transform: translateX(-50%); 
transform: translateX(-50%);