Bir metin kutusuna bastıktan sonra ios 7 sanal klavye görüntülendiğinde web uygulamamın altına yapışmak için div öğesiyle ilgili bir sorun yaşıyorum.Div öğesi ios 7 sanal klavye bulunduğunda altta kalmayacak

Bu div öğesi ettik: Bu tarz kullanır

.... 
     <div id="footer" style="text-align:center"> 
      <div id="idName"><img alt="SomeName" src="images/logo.png" /></div> 
     </div> 

    </form> 
</body>

#footer{ 
color:#CCC; 
height: 48px; 

position:fixed; 
z-index:5; 
bottom:0px; 
width:100%; 
padding-left:2px; 
padding-right:2px; 
padding:0; 

border-top:1px solid #444; 

background:#222; /* Old browsers */ 
background:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222)); 
background: -moz-linear-gradient(top, #999, #666 2%, #222); /* FF3.6+ */  
background: -webkit-linear-gradient(top, #999, #666 2%, #222); /* Chrome10+,Safari5.1+ */ 
background:  -o-linear-gradient(top, #999, #666 2%, #222); /* Opera 11.10+ */ 
background:  -ms-linear-gradient(top, #999, #666 2%, #222); /* IE10+ */ 
background:   linear-gradient(top, #999, #666 2%, #222); /* W3C */ 
}

Ve metin üzerinde bastığınızda alt bilgi elementer sanal klavyenin üzerindeki yukarı atlar . Bu, iDevices'ım ios 7'den önceki sürümlerde çalışırken çalışıyordu.

Sol taraftaki metin kutusuna basılmadan önce sağ taraftaki metin kutusuna basıldıktan sonra.

Left side: Before. Right side: After

altbilgi sanal klavyenin üzerindeki atlar.

GÜNCELLEME

: Ben Opossum tarafından sağlanan meta etiketi değiştirdik ve şimdi altbilgi altta kalır

Bu bir parçası

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<!--<meta name="viewport" content="initial-scale=1.0, user-scalable=0">--> 
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi"/> 
<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Uzatma değil soru, ama bir Android üzerinde çalışırken tamir vida şeyler :) Bunun için herhangi bir çözüm?

özüm: Maksimum ölçek ve hedef yoğunluk Dpi kaldırıldı ve şimdi hem IOS hem de Android için çalışıyor. meta etiketi artık şuna benzer:

<meta name="viewport" content="initial-scale=1.0, user-scalable=0, width=device-width, height=device-height"/>

kaynak

2013-09-24 Phu Minh Pham

height = cihaz yüksekliğine meta tag ayarı ile iki konu var. 1) Durum çubuğunun 20px'e ihtiyacı var. Uygulamadaki web görünümünden 20px sağlarsanız, ekranın 20 piksel altında bir web sayfasına sahip olursunuz. Anlamı: sayfanızda ne kadar az bilgi olursa olsun, her zaman bir kaydırma elde edersiniz. 2) Klavye açıkken, 548px'i (iPhone 5 ve daha yenisi) aşağıya kaydırarak sabit öğeye ulaşabilirsiniz. Bu eskiden olduğu şekilde değildi. – hnilsen

DÜZENLEME: Tamam, başka bir olası çözüm buldum. Böyle bir şey için html meta etiketleri kontrol edin:

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

bu ile değiştirin:

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />

benim için sorun giderildi. Uygulamamın Cordova kullanıyor olmasına dikkat etmeliyim.

Başka bir olası çözüm: muhtemelen kaynaklar dizin altında (config.xml'de bakarsak

, yazan bir satır görmelisiniz:

<preference name="KeyboardShrinksView" value="false" />

bunun doğru olarak ayarlanırsa, Bu, alt klavyenin yumuşak klavyenin üstünden hareket etmesini önler.Ancak, bu, klavyenin bazen kullanıcının yazdığı metin alanını da örtmesine neden olur.

kaynak

2013-09-24 20:06:49 Opossum

Belki burada kayıyorum ve eksik, ancak bu düzeltme bir iOS uygulaması içindir. Okuduğumda posterin bir web sayfasında uygulaması var mı? –

Üzgünüz, bu bağlantıyı ana ekranınıza kaydettiğinizde bir uygulama olarak çalışan bir web sayfasıdır. Safari'de adres yazdığınızda iyi çalışır, ancak bağlantıyı ana ekranınıza kaydettiğinizde = –

sorunu, config.xml'im yok gibi görünüyor. asp.net'de geliştirilmiş mi? –

Onaylanan yanıtlar çalışır, ancak bazı CSS'lerle karışabilir, bu yüzden başka bir şey kullanmalıyım.Benim düzeltme değil, ama internet buldum ve benim için çalıştı:

HTML:

<body onResize="onResize();">

JavaScript: ne zaman olayı yakalamak için kullanılan Benim durumumda

function onResize(){ 
    var ios7 = (device.platform == 'iOS' && parseInt(device.version) >= 7); 
    if (ios7){ 
     var height = $('body').height(); 
     if (height < 350){ // adjust this height value conforms to your layout 
      $('.myBottomMenu').hide(); 
     } 
     else { 
      $('.myBottomMenu').show(); 
     } 
    } 
}

kaynak

2013-12-20 09:45:03 Jaroslav

Belirli bir iOS düzeltmesi için, özellikle bir yeniden boyutlandırma olayı olduğunda satır içi javascript kullanmamalısınız. Yeniden boyutlandırma olayını çalıştırmadan önce iOS için denetleme, performansı büyük ölçüde iyileştirir '$ (document) .ready (işlev() { var ios7 = (device.platform == 'iOS' && parseInt (device.version)> = 7); if (ios7) { $ (pencere).on ("yeniden boyutlandır"), function() { // iOS adresinizi buradan düzeltin }); } }); –

giriş metin alanları olayları girerek ve alt çubuğunu gizleyerek

ve klavye kapandığında olayı yakalamak ve #footer sınıfta

document.addEventListener('focusout', function(e) { $('.bottom_bar').show();});

kaynak

2014-02-06 20:03:48 kavinhuh

suçlu var kullanarak klavyeyi geri göstermek bottom:0px; sanal klavyenin görünümünü, herhangi bir öğeye bottom verirsek, bu elemanlar iOS 7'de yukarı doğru hareket ettirin. Çözüm, top özelliğini kullanmaktır.

kaynak

2014-02-19 09:01:53

sadece bir eklenti, android jöle fasulyemde de oluyor. Ama elemanın en altta takılıp kalması gerektiğinden, mizanpajı nasıl düzenlediğimi göremiyorum. lütfen öneri – bondythegreat

Nasıl çözdüğümüz burada: cordova 2.9.0. Çözüm 1. viewport meta etiketinin eklenmesi bir dereceye kadar çözülmüştür, ancak tamamen çözülmemiştir. Çözüm #footer altbilginizi tutan whihc div id 2.

$(document).on('focus','input, select, textarea',function() { 
     if(OSName=== 'iOS' && ver[0] === 7){ 
       if($(this).attr('readonly')===undefined){ 
         $('#footer').hide() 
       } 
     } 
}); 
$(document).on('blur','input, select, textarea',function(){ 
      if(OSName=== 'iOS' && ver[0] === 7){ 
        if($(this).attr('readonly')===undefined){ 
        $('#footer').show(); 
        } 
       } 
});

. Bu, bir saniye için araç çubuğunu gösterecek ve gizleyecektir, bu titremeyi önlemek için, yerelde bir kod ekledik, 1. MainViewcontroller.m'deki klavyeler gösterimi için kaydolun. init'e aşağıdakileri ekleyin: functioon:

//fix for ios7 footer is scrolled up when the keyboard popsup. 
     [[NSNotificationCenter defaultCenter] addObserver:self 
               selector:@selector(keyboardWillShow:) 
                name:UIKeyboardWillShowNotification 
                object:nil];

işlev eklemek js dosyasına 3.In aşağıdaki işlevi

-(void)keyboardWillShow:(NSNotification*)notification{ 
    //call the javascript to hide the footer. 
    //fix for ios7 footer is scrolled along wiht the content when the keyboard comesup. 
    if (IsAtLeastiOSVersion(@"7.0")){ 
     [self.webView stringByEvaluatingJavaScriptFromString:@"()"]; 
    } 
}

2.Add

//Fix for footer is misalligned when the virtual keyboard pops up ios7 
//check for device is iPhone and os version is 7 
function hideFooter(){ 
    if(OSName=== 'iOS' && ver[0] === 7){ 
     if($(this).attr('readonly')===undefined) 
      $('#footer').hide(); 
    } 
}

Bu çözümün işe yarayıp yaramadığını bize bildirin.

kaynak

2014-03-13 06:55:56 user3414060

ben biraz geciktim ama bu iyi çalışıyor: bir numara aslen:

var footer = $(".footer"); 
footer.css({ "top": footer.position().top, "bottom": "auto"});

Bu tabana sahip olan bir sabit veya mutlak konumlandırılmış elemanı varsayar. Javascript komut dosyalarınızda (muhtemelen sayfa yüklendiğinde çağrılan bir işlevde) uygun olan yere ekleyin. Bu jQuery kullanır, ancak kolayca javascript içine çevirir. Bu temel olarak altbilgiyi altta kalmak yerine 'üst' değeriyle ilgili olarak altta kalmaya zorlar.

kaynak

2014-06-17 18:48:17 user3718546

Bu ihtiyaçlar için iyi bir çözüm. Ama bir sorun var. Sayfa kaydırılabilirse, altbilgi uygun konumda görünmez. Özellikle, bir alandaki tapper olduğunda sayfanın otomatik olarak kaydırıldığı durumlarda, – Umair

-2

Ana sorun, sınıf, tesisi

Altbilgiyi {} CSS içinde

Sen pozisyon "sabit" ve Z endeksini belirledik.

Lütfen Iphone'a göre elle konum özelliğini seçin.

kaynak

2015-08-13 07:22:35

Daha fazla bilgi verin ve öneriniz için örnek kod gönderin. –

Div öğesi ios 7 sanal klavye bulunduğunda altta kalmayacak

cevap

Altbilgiyi {} CSS içinde

İlgili konular