संपादित करें: Apple द्वारा प्रलेखित हालांकि मैं वास्तव में इसे काम करने के लिए नहीं प्राप्त कर सका: कीबोर्ड डिस्प्ले के साथ WKWebView व्यवहार : "iOS 10 में, WKWebView ऑब्जेक्ट सफारी के मूल व्यवहार से मेल खाता है, जब उनके कीबोर्ड को दिखाया जाता है। घटनाओं का आकार बदलें "(शायद आकार बदलने के बजाय कीबोर्ड का पता लगाने के लिए फोकस या फोकस प्लस विलंब का उपयोग कर सकते हैं)।
संपादित करें: कोड बाहरी कीबोर्ड नहीं, बल्कि ऑनस्क्रीन कीबोर्ड निर्धारित करता है। इसे छोड़कर क्योंकि जानकारी दूसरों के लिए उपयोगी हो सकती है जो केवल ऑनस्क्रीन कीबोर्ड के बारे में परवाह करते हैं। पृष्ठ params देखने के लिए http://jsbin.com/AbimiQup/4 का उपयोग करें ।
हम यह देखने के लिए परीक्षण करते हैं कि क्या वह document.activeElementतत्व है जो कीबोर्ड दिखाता है (इनपुट प्रकार = पाठ, टेक्स्टारिया, आदि)।
निम्नलिखित कोड हमारे उद्देश्यों के लिए चीजों को ठगता है (हालांकि आम तौर पर सही नहीं है)।
function getViewport() {
if (window.visualViewport && /Android/.test(navigator.userAgent)) {
// https://developers.google.com/web/updates/2017/09/visual-viewport-api Note on desktop Chrome the viewport subtracts scrollbar widths so is not same as window.innerWidth/innerHeight
return {
left: visualViewport.pageLeft,
top: visualViewport.pageTop,
width: visualViewport.width,
height: visualViewport.height
};
}
var viewport = {
left: window.pageXOffset, // http://www.quirksmode.org/mobile/tableViewport.html
top: window.pageYOffset,
width: window.innerWidth || documentElement.clientWidth,
height: window.innerHeight || documentElement.clientHeight
};
if (/iPod|iPhone|iPad/.test(navigator.platform) && isInput(document.activeElement)) { // iOS *lies* about viewport size when keyboard is visible. See http://stackoverflow.com/questions/2593139/ipad-web-app-detect-virtual-keyboard-using-javascript-in-safari Input focus/blur can indicate, also scrollTop:
return {
left: viewport.left,
top: viewport.top,
width: viewport.width,
height: viewport.height * (viewport.height > viewport.width ? 0.66 : 0.45) // Fudge factor to allow for keyboard on iPad
};
}
return viewport;
}
function isInput(el) {
var tagName = el && el.tagName && el.tagName.toLowerCase();
return (tagName == 'input' && el.type != 'button' && el.type != 'radio' && el.type != 'checkbox') || (tagName == 'textarea');
};
उपरोक्त कोड केवल अनुमानित है: यह विभाजित कीबोर्ड, अनकॉक्ड कीबोर्ड, भौतिक कीबोर्ड के लिए गलत है। शीर्ष पर टिप्पणी के अनुसार, आप window.innerHeightप्रॉपर्टी का उपयोग करके सफारी (iOS8 के बाद से) या WKWebView (iOS10 के बाद से) पर दिए गए कोड से बेहतर काम करने में सक्षम हो सकते हैं।
मुझे अन्य परिस्थितियों में विफलताएं मिली हैं: उदाहरण के लिए इनपुट पर ध्यान दें फिर होम स्क्रीन पर जाएं फिर पृष्ठ पर वापस आएं; iPad को व्यूपोर्ट को छोटा नहीं बनाना चाहिए; पुराने IE ब्राउज़र काम नहीं करेंगे, ओपेरा काम नहीं करता है क्योंकि कीबोर्ड बंद होने के बाद ओपेरा तत्व पर ध्यान केंद्रित करता है।
हालाँकि टैग किए गए उत्तर (ऊंचाई को मापने के लिए स्क्रॉलटॉप) में बुरा यूआई साइड इफेक्ट्स होते हैं यदि व्यूपोर्ट जूमेबल (या वरीयताओं में सक्षम बल-ज़ूम)। मैं अन्य सुझाए गए समाधान (स्क्रॉलटॉप को बदलते हुए) का उपयोग नहीं करता, क्योंकि iOS पर, जब व्यूपोर्ट ज़ूम करने योग्य होता है और फ़ोकस किए गए इनपुट पर स्क्रॉल होता है, तो स्क्रॉलिंग और ज़ूम और फ़ोकस (जो व्यूपोर्ट के बाहर एक फ़ोकस किए गए इनपुट को छोड़ सकते हैं) के बीच छोटी-छोटी बातचीत होती है - नहीं दृश्य)।