Why does the webpage cannot be displayed properly on iphone?

http://stackoverflow.com/questions/24855978/why-does-the-webpage-cannot-be-displayed-properly-on-iphone/24856054

HTML

<div class="login-box">
  <div class="login-logo">
    <img src="/securedcertifiedadministrator/images/GoDeal-Logo.png" alt="" class="img-responsive" />
  </div><!-- /.login-logo -->
  <div class="login-box-body">
    <div class="alert alert-danger" id="error-message" style="display:none;">
      <a class="close" ng-click="closeAlert()" aria-label="close">&times;</a>
      <strong>{{ error.message }}</strong>
    </div>
    <form class="form" name="form" ng-submit="login(form)" novalidate>
      <div class="form-group has-feedback">
        <img src="/securedcertifiedadministrator/images/GoDeal-Login-IconEmail.png" alt="" class="login-icon-email" />
        <input type="text" name="email" class="form-control login-input username" ng-model="user.username" placeholder="Username / Email" autocomplete="off" required>
      </div>
      <div class="form-group has-feedback">
        <img src="/securedcertifiedadministrator/images/GoDeal-Login-Password.png" alt="" class="login-icon-password" />
        <input type="password" name="password" class="form-control login-input" ng-model="user.password" placeholder="Password" required>
      </div>
      <div class="form-group">
        <div vc-recaptcha class="login-recaptcha" ng-model="user.captcha" key="'6LfspCMTAAAAADhTPH51fc3ubOPuKHc3PqsMSlbJ'" on-create="setWidgetId(widgetId)" style="display: flex; justify-content: center; margin-bottom: 10px;"></div>
      </div>
      <div class="row">
        <div class="col-md-12 col-xs-12">
          <button type="submit" class="btn btn-block btn-flat login-button">Sign In</button>
        </div>
      </div>
      <div class="form-group has-error">
        <p class="help-block" ng-show="form.email.$error.required && form.password.$error.required && submitted">
           Please enter your email and password.
        </p>
        <p class="help-block" ng-show="form.email.$error.email && submitted">
           Please enter a valid email.
        </p>
      </div>
    </form>

 ...

CSS

a {
	text-decoration:none;
}



#logo {
	text-align: center;
	margin: 0;
}

h1 {
	margin: 0;
	padding-top: 4mm;
	font-size: 2em;
	font-family: 'Lobster', cursive;
	font-weight: normal;
	line-height: 0.8em;
}

h2 {
	font-family: 'Gloria Hallelujah', cursive;
	font-size: 1.5em;
	margin: -5px 0 0;
	font-weight: normal;
}

body{
	font-family: 'Gloria Hallelujah', cursive;
}

a {
	color: #6ab47b;
}

header{
	background: #6ab47b;
	border-color:#599a68;
	float:left;
	margin: 0;
	padding: 5px 0 0 0;
	width: 100%;
}

nav{
	background:  #599a68;
	text-align: center;
	margin: 20px 0 0;
}

nav a, nav a:visited {
	color:#fff;
}

nav ul{
	list-style: none;
	margin: 0 10px;
	padding: 0;
}



nav a{
	font-weight: 800;
	padding: 15px 10px;
}

h1, h2{
	color:#fff;
}

h3{
	margin: 0 0 1em 0;
}

nav a.selected , nav a:hover {
	color:#32673f;
}

footer{
	font-size: 1em;
	text-align: center;
	clear:both;
	padding-top: 20px;
	color: #ccc;
	line-height: 0.8em;
	background: black;
	padding-bottom: 1mm;
}


img{
	max-width: 100%;
}

#gallery img{	
	width: 100%;
}

#gallery{
	margin:0;
	list-style: none; /** remove bullet point **/
}



#gallery li{
	float:left;
	margin: 2.5%;
	background-color: #f5f5f5;
	color: #bdc3c7;
}

#gallery li a p{
	margin: 0;
	padding: 0;
	font-size: 1.5em;
	color: #bdc3c7;
}



.icon{
	width: 40px;
	height: 40px;
	margin: 5mm 5px;
}

body{
	background: orange;
	margin:0;
	color:#999;
}



/******
Page about
******/

.profile-photo{
	display:block;
	max-width:600px;
	margin:0 auto 30px;
	border-radius: 100%;
	padding-top: 10mm;
}



#confu{
	margin-top: 70mm;
}

#context{
	font-family: 'Montserrat', sans-serif; font-size: 1.5em;
}

#aboutsec{
	font-family: 'Pacifico', cursive; font-size:1.5em;
	text-align:center;
}



#mus p{
	margin-top:0;
	padding-top:0;
	line-height: 0.8em;
}

#item_gallery{
	margin:0;
	list-style:none;
}

#item_gallery li{
	display:inline-block;
	padding-top: 22px;
	padding-right: 26px;
	padding-left: 26px;
	width:120px;
	vertical-align:...