HD Phone изменяет размер окна при активации триггераJquery

Программирование на jquery
Ответить
Anonymous
 HD Phone изменяет размер окна при активации триггера

Сообщение Anonymous »

У меня есть навигационный слайд, который при запуске отодвигает в сторону элемент div (.page), содержащий весь контент, чтобы освободить место для его отображения. Он работает должным образом в настольном браузере с измененным размером и на телефонах с небольшим разрешением. Проблема связана с телефонами с большим разрешением. Вместо того, чтобы отодвигать .page в сторону, он изменяет размер окна до тех пор, пока оно не будет содержать слайд и .page на экране. И хотя html и body имеют высоту 100%, они изменяются до половины этой высоты, остальная часть экрана телефона пуста. Я не понимаю, почему это происходит.

В моем HTML-коде есть метатег:
Это мой CSS:

Код: Выделить всё

html {
height: 100%;
width: 100%;
}

body {
overflow: hidden;
background-image: url('../img/bg_landing.jpg');
background-repeat: no-repeat;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
height: 100%;
width: 100%;
position: relative;
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_landing.jpg', sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/bg_landing.jpg', sizingMethod='scale')";
}

.page {
width: 100%;
height: 100%;
}

body.slided {
overflow: hidden;
}
А это мой js:

Код: Выделить всё

var ww = $(window).width();
var triggerw = $('#trigger').outerWidth();
var allowed_w = ww - Number(triggerw) - 20;

$('#nav').css('left', -allowed_w);

$('#trigger').click(function() {
ww = $(window).width();
allowed_w = ww - Number(triggerw) - 20;

if($('.page').hasClass('slided')) {
$('.page').animate({
'margin-left' : '0px'
}).removeClass('slided');

$('#nav').animate({
'left' : -allowed_w - 5
});
}
else {
$('.page').animate({
'margin-left' : allowed_w
}).addClass('slided');

$('#nav').animate({
'left' : '0px',
'width': allowed_w
});
}
});
Я не могу публиковать изображения, так как у меня недостаточно репутации, но вот ссылка с принтскрином. Темная часть скриншота по-прежнему является частью экрана телефона.

Изображение на tinypic!

Позвольте мне узнайте, нужна ли вам дополнительная информация.

Подробнее здесь: https://stackoverflow.com/questions/228 ... -activated
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Jquery»