Я пытаюсь создать веб-приложение, используя jQuery Mobile. Я хочу сделать навигационную страницу, состоящую из 4 кнопок, заполняющих весь экран.
Я использую следующий jQuery, чтобы вернуть высоту экрана, разделить его на 4 и применить к каждой кнопке. Я повторяю это при смене ориентации ...
var winHeight = window.innerHeight;
var buttHeight = winHeight / 4;
var winWidth = $(window).width();
$('.fullWidthButton').css({
height: buttHeight,
width: winWidth
});
$('.ui-mobile-viewport').css({
height: winHeight,
width: winWidth
});
console.log(winHeight);
$('#menu').bind("orientationchange", function () {
var winHeight = $(window).height();
var buttHeight = winHeight / 4;
var winWidth = $(window).width();
$('.fullWidthButton').css({
height: buttHeight,
width: winWidth
});
$('.ui-mobile-viewport').css({
height: winHeight,
width: winWidth
});
});
Вот веб-приложение в разработке ...
http://mobile.graphitedesign.com/#menu
Если вы посмотрите это на iPhone, то заметите, что при прокрутке внизу отображается крошечный серый фон - не конец света, но в идеале я бы хотел, чтобы пользователь не видел это все время, имея меню, заполняющее экран.
Если вы поворачиваете экран, jQuery выполняет свою работу и регулирует высоту кнопок, но теперь появляется огромный серый фон. Я пытался все, чтобы удалить это, но ничего не работает.
В идеале я хотел бы полностью отключить прокрутку, но тогда я потеряю адресную строку.
Любые указатели будут благодарны!
Спасибо!