সম্পাদনা: অ্যাপল দ্বারা নথিবদ্ধ যদিও আমি এটি আসলে কাজ করতে পারি না: ডাব্লু কে ওয়েবেভিউ আচরণটি কীবোর্ডের সাথে প্রদর্শন করে : "আইওএস 10-এ, ডাব্লুকেউভিউ ভিউ অবজেক্টগুলি উইন্ডো আইনে আপডেট করে সাফারির নেটিভ আচরণের সাথে মেলে হাইট সম্পত্তি যখন কীবোর্ড প্রদর্শিত হবে, এবং কল করবেন না ইভেন্টগুলি পুনরায় আকার দিন "(পুনরায় আকার ব্যবহারের পরিবর্তে কীবোর্ড সনাক্ত করতে ফোকাস বা ফোকাস প্লাস বিলম্ব ব্যবহার করতে পারে)।
সম্পাদনা করুন: কোড অনুমান অনস্ক্রিন কীবোর্ড, বাহ্যিক কীবোর্ড নয়। এটিকে রেখে দেওয়া কারণ তথ্য অন্যদের জন্য উপকারী হতে পারে যা কেবলমাত্র অনস্ক্রিন কীবোর্ড সম্পর্কে যত্নশীল। পৃষ্ঠার প্যারামগুলি দেখতে 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সম্পত্তি ব্যবহার করে সাফারি (আইওএস 8?) বা ডব্লিউকেউইউভিউ (আইওএস 10 এর পরে) প্রদত্ত কোডের চেয়ে আরও ভাল কাজ করতে সক্ষম হতে পারেন ।
অন্যান্য পরিস্থিতিতে আমি ব্যর্থতা পেয়েছি: যেমন ইনপুটটিতে ফোকাস দিন তারপরে হোম স্ক্রিনে যান তারপরে পৃষ্ঠায় ফিরে আসুন; আইপ্যাড ভিউপোর্টকে আরও ছোট করতে পারে না; পুরানো আই ব্রাউজারগুলি কাজ করবে না, অপেরা কাজ করবে না কারণ কীবোর্ড বন্ধ হওয়ার পরে অপেরা উপাদানগুলিতে ফোকাস রেখেছিল।
তবে ট্যাগ করা জবাব (উচ্চতা পরিমাপের জন্য স্ক্রোলটপ পরিবর্তন করা) এর ভিউপোর্ট জুমযোগ্য (বা পছন্দগুলিতে ফোর্স-জুম সক্ষম) থাকলে বাজে ইউআই পার্শ্ব প্রতিক্রিয়া রয়েছে। আমি অন্য প্রস্তাবিত সমাধান (স্ক্রোলটপ পরিবর্তন করে) ব্যবহার করি না কারণ আইওএসের উপর, যখন ভিউপোর্টটি চিড়িয়াখানা এবং ফোকাসড ইনপুটটিতে স্ক্রোলিং হয়, তখন স্ক্রোলিং এবং জুম এবং ফোকাসের মধ্যে বগি ইন্টারঅ্যাকশন হয় (যা ভিউপোর্টের বাইরে কেবলমাত্র দৃষ্টি নিবদ্ধ করা ইনপুট ছেড়ে দিতে পারে - না দৃশ্যমান)।