2015-10-08 76 views
2

我在我做了一個登陸頁面與引導一個問題...背景沒有響應上引導

我有以下代碼

<!DOCTYPE html> 
<html lang="en"> 

<head> 

    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <meta name="description" content=""> 
    <meta name="author" content=""> 

    <title>Landing page Title</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> 
    <!-- Bootstrap Core CSS --> 



    <link href="http://fonts.googleapis.com/css?family=Lato:300,400,700,300italic,400italic,700italic" rel="stylesheet" type="text/css"> 

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries --> 
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// --> 
    <!--[if lt IE 9]> 
     <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> 
     <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script> 
    <![endif]--> 
<style> 

/* CSS used here will be applied after bootstrap.css */ 

body { 
background: url('assets/img/4777.jpg') no-repeat center center fixed; 
-webkit-background-size: cover; 
-moz-background-size: cover; 
-o-background-size: cover; 
background-size: cover; 
background-color: #851; /* This color is for you to see the android problem. */ 
} 

.panel-default { 
opacity: 0.95; 
margin-top:50px; 

} 
.form-group.last { 
margin-bottom:0px; 
} 



    </style> 
</head> 

<body> 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-4 col-md-offset-4"> 
      <div class="panel panel-default"> 
       <div class="panel-heading"> <strong class="">Σύνδεση στην πλατφόρμα Εργαστηρίων</strong> 

       </div> 
       <div class="panel-body"> 
        <form class="form-horizontal" role="form"> 
         <div class="form-group"> 
          <label for="onoma-xristi" class="col-sm-3 control-label">Όνομα Χρήστη</label> 
          <div class="col-sm-9"> 
           <input type="text" class="form-control" id="onoma-xristi" placeholder="" required=""> 
          </div> 
         </div> 
         <div class="form-group"> 
          <label for="kwdikos-xristi" class="col-sm-3 control-label">Κωδικός</label> 
          <div class="col-sm-9"> 
           <input type="password" class="form-control" id="kwdikos-xristi" placeholder="" required=""> 
          </div> 
         </div> 
         <div class="form-group"> 
          <div class="col-sm-offset-3 col-sm-9"> 
           <div class="checkbox"> 
            <label class=""> 
             <input type="checkbox" class="">Να με θυμάσαι</label> 
           </div> 
          </div> 
         </div> 
         <div class="form-group last"> 
          <div class="col-sm-offset-3 col-sm-9"> 
           <button type="submit" class="btn btn-success btn-sm">Σύνδεση</button> 

          </div> 
         </div> 
        </form> 
       </div> 

       </div> 
      </div> 
     </div> 
    </div> 
</div> 




<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 


</body> 

</html> 

其中,當我加載它在我的瀏覽器,它玩完美,但我使窗口小等 但是,當我從我的三星Galaxy S5迷你 加載它沒有響應在後臺。 它在中間切割背景,並在頁面的下半部分呈現白色。

更新1

這個問題只在Chrome或Internet應用程序的Android智能手機進行檢測。

當有人用iPhone試用它時,它會發揮完美!

這是網站

http://79.170.44.145/irem.co.vu/test-ptx/index.html

而且從Android上的圖像是這些。 iPhone的iOS iOS iPHONE

ANDROID Chrome瀏覽器和網上也 ANDROID CHROME BROWSER AND INTERNET ALSO

有什麼建議?

+0

是否有可能向我們展示關於您問題的圖像? –

+0

@MarioKurzweil完成。 –

回答

1

請試試這個:

html{ 
    height:100%; 
    min-height:100%; 
} 
body{ 
    min-height:100%; 
} 

我發現它聽起來就像是同一個問題的文章,其你有。檢查出來here

+0

是的男人.....哇...這個小錯誤很緊張! –

+0

歡迎:) –

0

如果你想在背景圖像規模基於瀏覽器窗口的大小:

background-image:url('assets/img/4777.jpg'); 
background-repeat:no-repeat; 
background-size:contain; 
background-position:center; 
+0

嗯..如果我把它替換成我的「身體」標籤上的CSS我得到的最壞的行爲比以前! –