手機鍵盤調整視口

我正在做一個響應式網站，我有這個問題。一切運作良好，直到我選擇[input type =「text」]並從鍵盤出來，整個網站被調整大小，就像屏幕尺寸只是鍵盤上方的部分。我只是想保持正常的大小。我已經嘗試了所有解決方案提議在其他論壇stackoverflow，饅頭似乎沒有工作。手機鍵盤調整視口

有沒有人有任何想法如何解決這個問題？

<head> 
    <title>SchoolIn</title> 
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
    <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 

//other code

UPDATE： 我要去嘗試解釋更好。

我有一個頭部分

//other code 
<div class="head"> 
    //Here is some text 
</div> 
//other code

然後內容片斷

//other code 
<div class="container"> 
    <div class="content"> 
    //other code 
    <input type="text" ...... /> 
    <input type="password" ..... /> 
    <input type="submit" ..... /> 
    </div> 
</div> 
//other code

所有元素都是個有沒什麼以像素爲單位。

當keyboad出來的標題，容器和內容div是redimensioned，而不是輸入字段和按鈕。無論如何，他們從他們的容器中出來，因爲容器越來越小，他們保持原來的大小。我不知道我是否明確自己。

問題是一樣的，當鍵盤出來時如何讓它保持原始大小？

來源

2014-07-15 Daniel Srp

你是如何解決你的問題的？（我想我已經試過所有可能的組合，包括你的，但沒有成功。:( - 丹尼爾Srp） – user2360915

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

試試這片html。我將它用於我的每個頁面，並且始終按照它應該做的。也許你的工作不正常，因爲缺少最小規模的屬性。

來源

2014-07-16 08:09:32 LikeAJohny

我想我已經嘗試了所有可能的組合，包括你的，但沒有成功。:( –

如果沒有成功..爲什麼這被標記爲接受的答案？ – Lee

保存我的應用程序的一段。 – tapaljor

好吧我已經使它的工作，至少部分。對我而言，問題在於我將HTML和BODY的高度設置爲100％，所以當鍵盤出來時，高度變成了它的上方。如果我沒有聲明任何高度，它的工作就很好。

html, body{ 
    height: 100%; 
}

我之所以說部分是因爲我需要設備的高度，所以我可以使用頁面內的元素的比例。如果我沒有聲明高度，那麼頁面的內容將在一些智能手機中顯示爲半屏幕，而在其他智能手機中顯示。我已經在媒體查詢中做出了突破點，但我無法爲每個解決方案製作一個。我創建了一些範圍（例如：最大寬度：320 ----最小寬度：321，最大寬度：480 ....等等）。

再次有關如何解決身高問題的任何想法？

來源

2014-07-16 14:08:19

您是否找到任何解決方案？ –

沒有<meta name='viewport'/>或百分比修復在我的情況（Android 2.3的瀏覽器）工作，所以我結束了這個CSS：

body { 
    min-height: 350px; 
}

您還需要與height:auto什麼做到這一點。

這是一個破解，但它至少使網站在這種情況下可用。只要用戶嘗試縮放，就會將其縮小。

來源

2015-04-01 15:02:03 Dunc

手機鍵盤調整視口

回答

相關問題