2017-04-19 59 views
0

我正在創建一個AngularJs應用程序,我希望針對所有平臺和設備進行優化。我使用Bootstrap作爲我的主要造型方法。這對我來說是第一次,所以我會很感激你的耐心:D。AngularJs針對移動設備和所有設備的應用優化,使用Bootstrap:根據需要不顯示

我有一個應用程序的基本骨架,但我發現,瀏覽我的移動設備上的應用程序,它不顯示我想象和渴望的方式。

這是我的手機(安卓)上進行屏幕截圖:

enter image description here

我想它顯示是這樣的:

enter image description here

這裏是我的index.html代碼:

<!DOCTYPE html> 
<html> 
<head lang="en"> 
    <meta charset="UTF-8"> 
    <title>IMPI Technical Services</title> 

    <!-- Style sheets --> 
    <link rel="stylesheet" href="css/bootstrap.css" /> 
    <link rel="stylesheet" href="css/app.css" /> 
    <link rel="stylesheet" href="css/toastr.css" /> 

    <!-- favicons --> 
    <!-- For IE 9 and below. ICO should be 32x32 pixels in size --> 
    <!--[if IE]><link rel="shortcut icon" href="images/favicon/favicon.ico"><![endif]--> 
    <!-- Touch Icons - iOS and Android 2.1+ 180x180 pixels in size. --> 
    <link rel="images/favicon/apple-icon-180x180.png" href="images/favicon/apple-icon-180x180.png"> 

    <!-- Firefox, Chrome, Safari, IE 11+ and Opera. 196x196 pixels in size. --> 
    <link rel="icon" href="images/favicon/android-icon-192x192.png"> 

</head> 

<body ng-app="impi-app"> 

    <nav class="navbar navbar-inverse"> 
     <div class="container"> 
      <a class="navbar-brand" ui-sref="home">IMPI Techincal Services</a> 
      <div class="navbar-header"> 
       <button type="button" 
         class="navbar-toggle" 
         data-toggle="collapse" 
         data-target=".navbar-collapse"> 
        <span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
        <span class="icon-bar"></span> 
       </button> 
      </div> 
      <div class="navbar-collapse collapse"> 
       <ul class="nav navbar-nav"> 
        <li><a ui-sref="about">About</a></li> 
        <li><a ui-sref="products">Products</a></li> 
        <li><a ui-sref="contact">Contact</a></li> 
       </ul> 
      </div> 
     </div> 
    </nav> 

    <div class="container"> 
     <div ui-view></div> 
    </div> 

    <!-- Footer --> 
    <div class="container" id="copyright"> 
     <div> 
      <footer> 
       <div class="row"> 
        <div class="col-lg-12 col-md-12 col-xs-12"> 
         <p>Copyright &copy; Impi Technical Service 2017</p> 
        </div> 
       </div> 
      </footer> 
     </div> 
    </div> 

    ... 

</body> 

</html> 

這裏是主視圖代碼:

<!-- Page Content --> 
<div class="container"> 
    <!-- Jumbotron Header --> 
    <header class="jumbotron hero-spacer"> 
     <h2>A Warm Welcome!</h2> 
     <p> 
      This is the new home of IMPI Technical Services. We specialise in the delivery of specialised - customer focused - mining and construction 
      industry products and services. 
     </p> 
     <br /> 
     <p> 
      Our site is currently under development, and we are looking forward to bringing you a feature rich, customer experience. For ANY queries, you are more 
      that welcome to contact us directly, or to fill in our contact form! 
     </p> 
     <p> 
      <a class="btn btn-primary btn-large" ui-sref="contact">Contact Form</a> 
     </p> 
    </header> 
    <hr> 
    <!-- Title --> 
    <div class="row"> 
     <div class="col-lg-12"> 
      <h3>We Are Proud Suppliers Of:</h3> 
     </div> 
    </div> 
    <!-- /.row --> 
    <!-- Page Features --> 
    <div class="row text-center"> 
     <div class="col-md-3 col-sm-6 col-xs-12 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/supplier_images/rockmore.jpg" alt="Rockmore International"> 
       <div class="caption"> 
        <h3>Rockmore International</h3> 
        <p>Rockmore International is one of the worlds leading manufacturers of top quality percussive rock drilling tools.</p> 
        <p> 
         <a href="http://rockmore-intl.com" target="_blank" class="btn btn-primary">Visit Site</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/supplier_images/Montbert.jpg" alt="Montabert Hydraulic Drifters"> 
       <div class="caption"> 
        <h3>Montabert Hydraulic Drifters</h3> 
        <p> 
         Montabert was founded in 1921 by Joannes Montabert as Montabert S.A, a manufacturer of pneumatic equipment that would 
         introduce the first hydraulic concrete breakers and drifters. In 1935, through the initiative of Suzanne Montabert, 
         the company expanded its product line and added the Sullivan Ikine line of products under license. 
        </p> 
        <p> 
         <a href="http://montabertsa.co.za" target="_blank" class="btn btn-primary">Visit Site</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/supplier_images/vula-drilling.png" alt="Vulla Drilling"> 
       <div class="caption"> 
        <h3>Vula Drilling (Pty) Ltd</h3> 
        <p> 
         VULA Drilling (Pty) Ltd. is the Original Equipment Supplier (OES) of the patented VULA range of hard-rock drill bits. 
         This new range of drill bits have been specifically designed and developed with the use of ultra modern 
         Computer-Aided-Design-and-Manufacturing (CAD/CAM) Software to improve penetration rates and increase flushing of the drill bit, 
         resulting in an increase in productivity and meters drilled. 
        </p> 
        <p> 
         <a href="http://vuladrilling.co.za" target="_blank" class="btn btn-primary">Visit Site</a> 
        </p> 
       </div> 
      </div> 
     </div> 
     <div class="col-md-3 col-sm-6 col-xs-12 hero-feature"> 
      <div class="thumbnail"> 
       <img src="../images/supplier_images/powerbit.png" alt="Powerbit Rocktools"> 
       <div class="caption"> 
        <h3>Powerbit Rocktools</h3> 
        <p> 
         Powerbit Rocktools has been in operation since 1996. They are a South African based company, with clients all over Africa. 
         Their factories are located in Taiwan and China. 
        </p> 
        <p> 
         <a href="http://powerbit.co.za" target="_blank" class="btn btn-primary">Visit Site</a> 
        </p> 
       </div> 
      </div> 
     </div> 
    </div> 
    <!-- /.row --> 
    <hr>> 
</div> 

什麼我失蹤或做錯任何指針?

這是,如果你想查看你自己的移動設備上測試顯示的網站地址:www.impitechservices.co.za

回答

0

你缺少頭標記幾個meta標籤。

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

需要這些標籤才能正確呈現頁面。

+0

非常感謝!你搖滾! :d – onmyway

相關問題