Я пробежал несколько из приведенных выше ответов, и ни один из них не дал именно то, что я хотел, а именно, чтобы имитировать функциональность iPhone как можно ближе.Вот что сейчас работает для меня на производстве.
Работает, назначая ширину окна и высоту окна просмотра устройства атрибуту данных для последующей проверки.Поскольку телефоны не меняют ширину при подтягивании клавиатуры, только высота, проверяя соотношение И ширину и исходную ширину, может сказать вам, если клавиатура поднята.Я не нашел варианта использования, который еще не удался, но я уверен, что найду.Если вы все найдете, пожалуйста, дайте мне знать.
Я использую некоторые глобальные переменные, такие как InitialRun и MobileOrientation, которые используются для переключения js, я также использую атрибуты данных html5 для хранения информации в DOM дляманипуляция css.
var InitialRun = true; // After the initial bootstrapping, this is set to false;
var MobileOrientation = 'desktop';
function checkOrientation(winW, winH){ // winW and winH are the window's width and hieght, respectively
if (InitialRun){
if (winW > winH){
$('body').attr('data-height',winW);
$('body').attr('data-width',winH);
MobileOrientation = 'landscape';
$('body').attr('data-orientation','landscape');
}
else{
$('body').attr('data-height',winH);
$('body').attr('data-width',winW);
MobileOrientation = 'portrait';
$('body').attr('data-orientation','portrait');
}
}
else{
if (winW > winH && winW != $('body').data('width')){
MobileOrientation = 'landscape';
$('body').hdata('orientation','landscape'); //TODO:uncomment
$('body, #wrapper').css({'height':"100%",'overflow-y':'hidden'});
//$('body').attr('data-orientation','portrait');
}
else{
MobileOrientation = 'portrait';
$('body').attr('data-orientation','portrait');
$('body, #wrapper').css({'height':$('body').data('height'),'overflow-y':'auto'});
}
}
}