2014-02-07 71 views
0

我在通過對當前網站進行重新編碼的途中,遇到了移動兼容性問題。在移動設備上製作網站頁面大小正常的桌面大小

如果您通過移動設備查看當前網站(here),則可以看到網站的寬度和高度與在桌面上進行縱向和橫向滾動查看時的寬度和高度相同。

然而,在我的新網站(使用bootswatch引導石板 - bootswatch.com/slate/)當你預覽它在移動設備上嘗試給它的所有擠入固定移動設備寬度(here

我已經嘗試添加下面的幾行,但是我沒有看到區別。

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

html, 
body { 
    height: 100%; 
    width: 100%; 
    } 

有什麼辦法可以讓新網站與移動設備中的當前維度顯示在同一維度上?

謝謝。

回答

0

你看到的是引導程序的響應行爲,我猜。而且,在移動設備上將內容嵌入設備寬度當然是有意義的。

你可以讀到這裏你引導項目禁用響應功能:Disabling bootstrap responsiveness

UPDATE:

爲了讓您的內容水平滾動地址:

html, body { 
    overflow: auto; 
} 

到您的樣式表。

如果這不起作用嘗試加入!important的聲明:

html, body { 
    overflow: auto !important; 
} 

注: 這不是最有效的方式CSS-性能明智的,但考慮到CSS的您的理解水平,我猜測你自己改變bootstrap.css會太多了。

+0

當我將bootstrap配置爲無響應時,我無法在移動設備的網頁上進行水平滾動,關於我應該怎麼做的任何想法?謝謝。 – user3285828

+0

我更新了我的答案。 – Sebsemillia

0

對於Bootstrap它自我禁用響應能力的步驟如下。你可以下載這個禁用的模板/ CSS。退房http://getbootstrap.com/getting-started/

步驟禁用頁面響應 省略的CSS文檔中提到 覆蓋在.container與單一寬度每個網格層的寬度,例如寬度視:970像素重要;確保這是在默認的Bootstrap CSS之後。您可以選擇避免!重要的媒體查詢或一些選擇器。 如果使用導航欄,請刪除所有導航欄摺疊和展開行爲。 對於網格佈局,除了使用.col-xs- *類以外,或者使用.col-xs- *類來代替中型/大型網格。別擔心,超小型設備網格可以擴展到所有分辨率。 您仍然需要針對IE8的Respond.js(因爲我們的媒體查詢仍然存在並需要處理)。這會禁用Bootstrap的「移動網站」方面。