使寬頁面適合移動設備的寬度

Question

我有一個網站，為了適合某些頁面的內容，該網站的最小寬度為1170px。 我也無法制作單獨的移動版本。

iPhone和Droids通常會自動調整頁面大小以適合寬度。 但是，如果內容的高度小於屏幕的高度，然后寬度超出屏幕，它們似乎不會調整頁面的大小。

關於我應該改變什么的任何想法？ 我不知道要進行哪些編輯不會干擾桌面演示。

Answer 1

有其他方法可以做到這一點，這很重要

如果您打算在設備上使用，只需將該代碼放在</head>結束標簽之前

<meta name="viewport" content="width=device-width" />

然后，如果您不想重復代碼，只需將您要使用媒體查詢顯示在網站上的屏幕定位

下面的例子：

@media handheld, screen and (max-width: 320px){
    .yourElementClassOrId {
        width:100%;  
    }
} 

@media handheld, screen and (max-width: 720px){
    .yourElementClassOrId {
        width:100%;  
    }
}  
@media handheld, screen and (max-width: 620px){
    .yourElementClassOrId {
        width:100%;  
    }
}  

但是如果您的站點已經具有靈活的網格，則可以輕松操作您的站點

希望這個幫助

Answer 2

嘗試將target-densitydpi=device-dpi到元視口。 這是特定於Android的。

<meta name="viewport" content="width=device-width, target-densitydpi=device-dpi">

Answer 3

您使用的是twitter bootstrap，而您的代碼中缺少bootstrap- sensitive.css。