窗體在手機上不可見

html, body { 
    -webkit-font-smoothing: antialiased; 
    height: 100%; 
    /* The html and body elements cannot have any padding or margin. */ 
    font-family: 'Open Sans', sans-serif; 
    background-color: #f4f5f6; 
} 
h1 { 
    font-weight: 700; 
} 
h2 { 
    letter-spacing: -1px; 
    font-weight: 300; 
    margin-top: 0; 
} 
h3 { 
    letter-spacing: -1px; 
    font-weight: 100; 
    margin-top: 0; 
    font-size: 4em; 
} 
iframe{ 
    width: 100%; 
    border: 0; 
} 
/*#features,#support,#testimonials,#news, #bottom{background-color: #f4f5f6;}*/ 

/* Wrapper for page content to push down footer */ 

#wrap { 
    min-height: 100%; 
    height: auto!important; 
    height: 100%; 
    /* Negative indent footer by it's height */ 
    margin: 0 auto -60px; 
    color: #333; 
} 
/* Set the fixed height of the footer here */ 

#push { 
    height: 60px; 
} 
/*Navbar Customizations*/ 

.navbar-purity { 
    background: #2D3538; 
    background-color: #2D3538; 
    filter: none; 
    background-image: none; 
    border: none; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
    -webkit-transition: background .3s ease; 
    -moz-transition: background .3s ease; 
    -o-transition: background .3s ease; 
    -ms-transition: background .3s ease; 
    transition: background .3s ease; 
} 
.navbar-purity { 
    background: rgba(46, 46, 46, 0.35); 
    border: none; 
} 
.navbar-purity .navbar-brand { 
    padding: 10px 5px; 
} 
.navbar-purity .navbar-toggle{ 
    border-color: transparent; 
} 
.navbar-purity .navbar-toggle { 
    border-color: transparent; 
} 
.navbar-purity .navbar-toggle:hover, 
.navbar-purity .navbar-toggle:focus { 
    background-color: #333; 
} 
.navbar-purity .navbar-toggle .icon-bar { 
    background-color: #fff; 
} 
.navbar-purity.sticky { 
    background: rgba(0, 0, 0, 0.7); 
    border-bottom: none; 
} 
.navbar-purity.sticky .nav > li > a:hover { 
    color: #fff; 
    background: none; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
} 
.navbar-purity.sticky .nav > li.active a { 
    background: transparent; 
    color: #fff; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
} 
.navbar-purity.sticky .nav > li a { 
    background: transparent; 
    color: #b4b4b4; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
} 
.navbar-purity.sticky .dropdown-menu li >a { 
    display: block; 
    clear: both; 
    font-weight: 400; 
    line-height: 20px; 
    white-space: nowrap; 
} 
.navbar-purity .sticky .dropdown-menu li > a:hover, .navbar-purity .sticky .dropdown-menu li > a:focus, .navbar-purity .sticky .dropdown-submenu:hover > a { 
    text-decoration: none; 
    color: #FFF; 
    background-color: #292929; 
    background-image: none; 
} 
.navbar-purity .dropdown-menu li > a:hover, .navbar .dropdown-menu li > a:focus, .navbar .dropdown-submenu:hover > a { 
    text-decoration: none; 
    color: #FFF; 
    background-color: #292929; 
    background-image: none; 
} 
.navbar .nav > li > .dropdown-menu:after { 
    border-bottom: 6px solid #383838; 
} 
.dropdown-menu { 
    margin: 5px 0 0; 
    border-radius: 0; 
    -webkit-border-radius: 0; 
    -moz-border-radius: 0; 
    background-color: #383838; 
    padding: 0; 
    border: 0; 
    ; 
} 
.dropdown-menu li > a { 
    color: #a5a5a5; 
    padding: 10px; 
    border-bottom: 1px solid #474747; 
} 
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner { 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
} 
.navbar .nav > li > a { 
    text-shadow: none; 
    color: #d3d3d3; 
    font-size: 15px; 
    font-weight: 700; 
    text-decoration: none; 
    vertical-align: middle; 
    font-size: 15px!important; 
    padding: 18px; 
    -webkit-box-align: center; 
    -moz-box-align: center; 
    -o-box-align: center; 
    box-align: center; 
    -webkit-transition: color .3s ease; 
    -moz-transition: color .3s ease; 
    -o-transition: color .3s ease; 
    -ms-transition: color .3s ease; 
    transition: color .3s ease; 
} 
.navbar .nav > li > a:hover { 
    color: #999; 
    background: rgba(0, 0, 0, 0.36); 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
} 
.navbar .nav > li.active a { 
    background: rgba(0, 0, 0, 0.36); 
    color: #999; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
} 
.navbar .nav > li.active a:hover { 
    background: rgba(0, 0, 0, 0.36); 
    color: #C6D0D3; 
    box-shadow: none; 
    -webkit-box-shadow: none; 
    -mox-box-shadow: none; 
} 
/* Nav bar CSS END*/ 

/*General Items CSS*/ 

#main-media { 
    padding-bottom: 10px; 
} 
section { 
    position: relative; 
} 
header { 
    background: url(../images/header2.jpg) no-repeat fixed #020202; 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
} 
.btn-landing { 
    text-shadow: 0 -1px 0 #6c9a15; 
    color: #fff; 
    background-color: #8AB833; 
    background-image: 0; 
    background-image: 0; 
    background-image: 0 to(#6c9a15)); 
    background-image: 0; 
    background-image: 0; 
    background-image: linear-gradient(top, #a8d651, #6c9a15); 
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a8d651', endColorstr='#6c9a15', GradientType=0); 
    border-color: #8AB833 #6c9a15 #6c9a15 #8AB833; 
    border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25); 
} 
.btn-landing:hover, .btn-landing:active, .btn-landing.active, .btn-landing.disabled, .btn-landing[disabled] { 
    background-color: #6c9a15; 
} 
.btn-landing:hover { 
    color: #fffffb; 
    text-shadow: 0 -1px 0 #4e7c00; 
} 
.btn-landing:focus { 
    color: #eeff97; 
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    border-color: #8AB833 #6c9a15 #6c9a15 #8AB833; 
    border-color: rgba(0, 0, 0, 0.25) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.25); 
} 
.btn-landing.active, .btn-landing:active { 
    background-image: none; 
    -webkit-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    -moz-box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05); 
    color: #eeff97; 
} 
.btn-landing { 
    font-family: Open Sans, sans-serif; 
    min-width: 200px; 
    padding: 20px; 
    font-size: 19px!important; 
    font-weight: 300; 
    background: #8AB833; 
    border-radius: 0;

當我在PC或平板電腦上查看我的頁面時，可以看到註冊表單，但如果我在移動設備上查看它，表單不顯示？這在過去的4個小時裏一直讓我瘋狂，我似乎無法找到解決方案！窗體在手機上不可見

這裏是我的源

<!--################ HEADER START ################--> 
     <header id="top" data-stellar-background-ratio="0"> 
      <div class="container home"> 
       <div class="flexslider home"> 
        <ul class="slides"> 
         <li class="margintop10p"> 
          <h1>Set Your Course For The Life You <span style="color: #f4f400"> Always Wanted</span></h1> 
         </li>  
        </ul> 
        </div>   
<div class="col-md-12">    
      <div class="subscribe"> 
      <center> 
       <h2 class="info-text">Sign Up For Your FREE Introductory Session.</h2> 
       <h4 class="info-text"> <span style="color: #FFFFFF">Discover the power of the subconscious and how to use it to live a life that you love!</span></h4> 
      <div class="row"> 
      <form class="form-inline" class="infusion-form" accept-charset="UTF-8" action="https://zi258.infusionsoft.com/app/form/process/2ae00069f47efab206dbbafa757ff586" method="POST" target="_blank"> 
         <input name="inf_form_xid" type="hidden" value="2ae00069f47efab206dbbafa757ff586" /> 
         <input name="inf_form_name" type="hidden" value="Free Session Sign Up" /> 
         <input name="infusionsoft_version" type="hidden" value="1.45.0.48" /> 
      <div class="form-group"> 
       <label class="sr-only" for="inf_field_FirstName">First Name</label> 
       <input class="form-control" class="infusion-field-input-container" id="inf_field_FirstName" name="inf_field_FirstName" type="text" placeholder="Enter first name" /> 
      </div> 
      <div class="form-group"> 
       <label class="sr-only" for="inf_field_Email">Email</label> 
       <input class="form-control" class="infusion-field-input-container" id="inf_field_Email" name="inf_field_Email" type="email" placeholder="Enter email"/> 
       <input class="btn btn-success btn-fill" type="submit" value="Sign Up" target="_blank"/> 
      </div>  
      </form>  
      </div>   
      </center> 
      </div> 
</div>   
       <div class="social-header hidden-phone"> 
        <a href="https://twitter.com/imadhull" target="_blank" class="social-network sn2 twitter"></a> 
        <a href="https://www.facebook.com/amit.dhull" target="_blank" class="social-network sn2 facebook"></a> 
        <a href="https://plus.google.com/+AmitDhullCoaching/" target="_blank" class="social-network sn2 google"></a> 
        <a href="https://instagram.com/iamadhull/" target="_blank" class="social-network sn2 picasa"></a> 
       </div> 
      </div> 
      <div id="home-arrow" class="hidden-phone"> 
       <a href="#features"><i class="icon-double-angle-down icon-3x" id="iconHome"></i></a> 
      </div> 
     </header> 
     <!--################ HEADER END ################-->

來源

2015-09-09 Milos Vukcevic

歡迎StackOverflow的米洛斯。當提出與調試相關的問題時，請發佈最少的相關代碼片段['HTML'，'CSS'，'JS'（如果相關）等]，並附上對您問題的描述。查看這個鏈接，瞭解如何在SO中提示qeustions的提示：http://stackoverflow.com/help/how-to-ask –

@AndrewLyndem這看起來像是一個包含代碼示例的明顯問題。什麼似乎是問題？ – leigero

這種形式是訂閱類的一部分，當在移動設備上查看時，它是不可見的，在臺式電腦上它是可見的，我懷疑它正在調整大小並推到某個地方，因此它不可見？ –

這很難說，但我相信這是由於您的固定高度header#top。

我檢查了表格以便在檢查面板中找到它，然後我使用了鍍鉻設備模擬器並選擇了「Samsung Galaxy S III」。當我進入這個新的觀點時，表單不在那裏。由於我已經選擇了該元素，DOM高亮顯示它低於下一個內容。我嘗試使用position:absolute; z-index:10;，肯定它只是在錯誤的位置。爲了解決這個問題，我瀏覽了所有元素的祖先，發現它是header#top的height:...px（對不起，我只是意識到這個值是在運行時從屏幕高度產生的，所以不會出現在你的文件中）。刪除這個問題解決了這個問題 - 我想。很難說，沒有測試它是真的 - 畢竟，我只是模擬。

因此，要解決這個問題，嘗試添加這header{...}

height: auto!important; 
min-height: 100vh;

來源

2015-09-09 16:21:23 jaunt

對不起，我沒有關注，你能解釋一下頂部頂部是什麼？ –

窗體在手機上不可見

回答

相關問題