Fluid scaling webpage not scaling as expected on Mobile

Question

I have created a webpage that scales moderately well on the desktop, all the content is a percentage of the window height or width. I don't understand why the webpage isn't scaling to the size of the phone screen? here is the website I've put on a hosting site so i can test it on my iPhone:

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

HTML can be seen on that link

CSS for the important things is:

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

Scaling the browser to the same resolution as an iPhone does not show what the iPhone shows (I want the iPhone to show what the desktop shows), am I missing something obvious?

Many thanks

H

Answer 1

Try adding this line in your HTML Head :

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

Answer 2

I found I was not using all three types of transform, so for chrome and Ie it was working yet the iPhone required I use all three:

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