2014-07-15 28 views
13

Duyarlı bir web sitesi yapıyorum ve bu problemi yaşıyorum. Her şey bir [input type = "text"] seçip klavyeden çıkana kadar iyi çalışır, tüm site yeniden boyutlandırılır, ekran boyutu sadece klavyenin üst kısmıdır. Ben sadece normal boyuta sahip olmasını istiyorum. Stackoverflow üzerinde önerilen tüm çözümü başka bir forumda da denedim, hiçbir şey işe yaramıyor gibi görünüyor.mobile keyboard resize viewport

Bunu düzeltmek konusunda herhangi bir fikri olan var mı?

<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 

GÜNCELLEME: Daha iyi açıklamak için çalışacağım .

sonra bir baş bölümü

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

Tüm eleman hiçbir şey piksel orada yüzdesinde olan bir içerik bölümünü

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

sahiptir.

Keyboad üstbilgiden çıktığında, kapsayıcı ve içerik divı yeniden boyutlandırılır, bunun yerine giriş alanları ve düğmesi yoktur. Her halükarda konteynerlerinden çıktılar, konteyner küçülür ve orijinal boyutunu korurlar. Kendimi netleştirdiğimi bilmiyorum.

Soru aynı, klavye çıkınca orijinal boyutta kalmasını nasıl sağlarım?

+0

Sorununuzu nasıl düzelttiniz? (Sanırım tüm olası kombinasyonlarını denedim, ama sizinki gibi, ama başarı yok. :(- Daniel Srp) – user2360915

cevap

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

Bu html parçasını deneyin. Her sayfam için kullanıyorum ve her zaman gerekeni yaptı. Belki de eksik asgari ölçek özelliği nedeniyle sizinki çalışmıyor.

+0

Sanırım senin olası tüm kombinasyonlarını denedim, ama başarılı değilsin.:( –

+6

Başarı yoksa, bu kabul edilen cevap olarak niçin işaretlendi? – Lee

+1

Uygulamamı kaydeden hat parçası – tapaljor

1

Tamam, en azından kısmen çalışıyorum. Benim için sorun, HTML ve BODY yüksekliğini% 100 yaptım, bu yüzden klavye çıktığında, yükseklik onun üzerindeki kısım haline geldi. Herhangi bir yükseklik beyan etmezsem iyi çalışır. Ben bu yüzden sayfası içindeki unsurlarla oranını yapabilirsiniz cihazın yüksekliğini gerektiğinden

html, body{ 
    height: 100%; 
} 

Ben kısmen söyledi. Yüksekliğini bildirmezsem sayfanın içeriği, bazı akıllı telefonlarda diğer ekranlarda, yarım ekran olarak görüntülenir. Medya sorgusuyla çoktan kırılma noktaları oluşturdum, ancak her bir çözünürlük için bunu yapamam. Bazı aralıklar oluşturdum (örneğin: max-width: 320 ---- min-width: 321, max-width: 480 .... ve bir tane).

Yine yükseklik probleminin nasıl çözüleceğine dair herhangi bir fikir var mı?

+0

Bunun için herhangi bir çözüm buldunuz mu? –

1

No <meta name='viewport'/> veya yüzde düzeltmeleri (Android 2.3 tarayıcı) benim durumumda çalıştı, bu yüzden bu CSS ile sona erdi:

body { 
    min-height: 350px; 
} 

Ayrıca height:auto ile herhangi bir şey için bunu yapmak gerekir.

Bu bir kesmek, ancak en azından web sitesi bu kenar durumda kullanılabilir hale getirir. Kullanıcı yakınlaştırmaya çalıştığı anda, sistemden çıkar.