I have tried a first solution for your problem by catching the resize event
With that you can know the orientation and gest is the keyboard is visible
UPDATE : adding iOS mobile safari support with LKM solution
var is_keyboard = false;
var is_landscape = false;
var initial_screen_size = window.innerHeight;
/* Android */
window.addEventListener("resize", function() {
is_keyboard = (window.innerHeight < initial_screen_size);
is_landscape = (screen.height < screen.width);
updateViews();
}, false);
/* iOS */
$("input").bind("focus blur",function() {
$(window).scrollTop(10);
is_keyboard = $(window).scrollTop() > 0;
$(window).scrollTop(0);
updateViews();
});
Now you can show and hide the logo and some line item
function updateViews() {
$("li").hide();
if (is_keyboard) {
$("#logo").hide();
if (is_landscape) {
$("li").slice(0, 2).show();
}
else {
$("li").slice(0, 4).show();
}
}
else {
$("#logo").show();
$("li").show();
}
}
For the JS based on this HTML
Logo
- Item
- Item
- Item
- Item
- Item
- Item
- Item
- Item
Check out my example page