什麼會導致此網站上的響應功能無法在移動設備上使用？

我使用的是引導模板，你可以在這裏看到了現場版 - https://02dc74ce3e31e56a52ebcc845dca58e87283aabe.googledrive.com/host/0Bxbofwq0kd4ReUt2YWVOYmt3WVU/什麼會導致此網站上的響應功能無法在移動設備上使用？

如果你查看它在移動設備上，你將看到如何引導的響應在踢

但是，當我將其應用於my Rails app，移動版本看起來不一樣。

任何想法可能會導致這種差異？

您可以在故事的主要「內容」區域看到差異（請注意，在我的版本中，您在主視圖中看到多個故事，但原件上只顯示1個故事，您可以閱讀內容更容易）。您也可以在按下按鈕時看到它。

按下'藍色'按鈕到原稿的右上角，您會注意到側面板出現在頂部。但在我的版本中，它仍然是一邊，一切都很小。

我錯過了什麼？

謝謝。

來源

2014-09-20 marcamillion

我失去的東西？'？' – Sudheer 2014-09-24 11:36:15

這是什麼問題？ – marcamillion 2014-09-25 00:07:05

我在鐵軌應用程序中看不到視口標記 – Sudheer 2014-09-25 06:12:58

添加到您的application.html.erb：

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

來源

2014-09-25 15:15:11 Sudheer

確保您使用rails g scaffold刪除了scaffold.css文件。

來源

2014-09-20 03:11:38 kobaltz

從未使用'scaffold'，所以這不是問題。 – marcamillion 2014-09-20 03:39:38

確保您的其他一些CSS不會導致問題。嘗試一次刪除一個文件，看看是否有幫助。 – kobaltz 2014-09-20 03:40:38

當您在rails視圖中實現html時，您做了太多更改。像原來的標題有以下內容：

<header class="header"> 
    <hgroup class="pull-left"> 
    <h1 class="site-title"> 
     <a href="index.html" title="Von" rel="home"> 
     <i class="fa fa-lemon-o"></i> Von 
     </a> 
    </h1> 
    </hgroup> 
    <div class="btn btn-primary pull-right" id="togglesidebar"> 
    <i class="fa fa-bars"></i> 
    </div> 
</header>

但在你看來，而不是<hgroup class="pull-left">你有<hgroup class="pull-left col-xs-3 col-sm-3 col-md-3 col-lg-3">和<div class="btn btn-primary pull-right" id="togglesidebar">你有<div class="col-xs-3 col-sm-3 col-md-3 col-lg-3 masthead-group-3">還您在這兩個元素摧毀了你的所有頭視圖之間增加了兩個元素。

你還沒有使用HTML設計的中間部分，它似乎你寫你自己的。在你的<header class="entry-header">你創建了div而不是圖片標籤。所以每件事情都在這裏開始扭曲。您爲每個主要部分包含頁眉頁腳部分。但這不是什麼大問題。嘗試刪除confirmed和unconfirmed的div，然後改用圖片。所以你會有正確的看法。同樣從你添加的視圖中刪除行類，使視圖看起來更對稱。

在你的部分。當您嘗試在移動視圖上看到時。主容器的寬度<div style="display: inline-block;" class="col-sm-3 sidebar" id="secondary">是根據它的子元素（如<div class="about">）計算得出的。由於您的子元素是形式，並且其寬度小於表單上顯示的寬度，因此其餘部分沒有適當的背景色#1c171e。因此，嘗試增加你的表格控件的寬度或<h4>Submit Report</h4>，如<h4>Submit Report    </h4>（類型的黑客）下約節你會得到正確的看法。

來源

2014-09-24 10:50:58

好吧，我做了一些改變。我回復了大部分帖子結構與主題相同。你可以檢查我的應用程序鏈接，看看。它仍然給我這個問題，即使它看起來好一點。 N – marcamillion 2014-09-24 23:41:57

建議您尚未對標題部分進行任何更改。登錄並過濾掉你的主題。也提交新聞的寬度太多了。你也沒有改變你的新聞部分的寬度，所以它也打破了modbile視圖。 – 2014-09-25 04:07:22

感謝您的評論以及您的努力，但真正的答案是@SaiRamSudheer在他的評論中指出的meta viewport標籤。那條線改變了一切。我一定會針對你所做的一些改變來解決我遇到的其他問題，但是這個'meta'標籤解決了我所遇到的核心問題。 – marcamillion 2014-09-25 15:15:09

從你的css文件判斷，你已經多次加載類似的CSS。考慮一下這樣一個事實，如果上述人員提出的所有其他建議都得到糾正，那麼在應用程序scss文件中放置css文件可能會覆蓋您的正確代碼。

我還要檢查視meta標籤上面

來源

2014-09-25 12:40:16 scooterlord

這是它的'meta'標籤。 – marcamillion 2014-09-25 15:16:38

如果你嘗試調用CSS和JS被用作單獨的獨立文件的建議，而不是精縮，你還有這個問題？這些文件的順序也很重要。我看到很多古怪的問題，當一個JS在另一個之前被加載時，CSS也一樣。

P.S.我會離開這個信息作爲與接聽「評論」，但我沒有足夠的堆棧溢出信貸還沒有這樣做;-)

來源

2014-09-25 14:12:14 khilley

什麼會導致此網站上的響應功能無法在移動設備上使用？

回答

相關問題