Изменить изображение на ориентации устройства jquery-mobile

поэтому у меня есть задача сделать сайт мобильного дизайна, и я должен менять изображение каждый раз, когда я наклоняю устройство.Изменить изображение на ориентации устройства jquery-mobile

ИНСТРУКЦИЯ

Создание 4 слоя в HTML-документе, в соответствии с макетами выше, используя изображения, предоставленные вам. Это мобильный сайт. Мы предоставили объекты изображения как для портретной, так и для ландшафтной ориентации. Правильные изображения должны отображаться в зависимости от ориентации устройства пользователя: . Цель этой страницы - позволить пользователю перемещаться между слоями путем наклона устройства. Пример: на странице BLUE, наклоняющей ваше устройство влево, вы попадаете на страницу GREEN и наклоняете ее на , и вы попадаете на страницу YELLOW. При переходе между слоями должен быть эффект затухания.

Итак, я думал о чем-то подобном, но мой код на самом деле не работает. Пожалуйста, проверьте приведенный ниже пример jsfiddle, спасибо.

Html код

<div data-role="page"> 
    <div data-role="header"> 
    <h1>The orientationchange Event</h1> 
    </div> 

    <div data-role="main" class="ui-content"> 
    </div> 

    <div data-role="footer"> 
    <h1>Footer Text</h1> 
    </div> 
</div>

Link

источник

2017-01-12 user7409024

В случае, если вы изменение размера изображения с помощью JQuery, попробуйте изменить его с помощью запроса CSS медиа, который более быстрый и стабильный процесс, использовать что-то подобное в CSS:

@media screen and (orientation:portrait) { /*CSS for portrait*/ }

@media screen and (orientation:landscape) { /*CSS for landscape*/ }

Не забудьте использовать атрибут media = "screen" на теге ссылки, где размещен файл css или он не будет работать.

В качестве альтернативы вы можете обеспечить максимальную ширину изображения в процентах или в пикселях (при фиксированной ширине) и высоте, заданной как auto, примерно такая максимальная ширина: 80%; высота: авто; чтобы избежать растягивания изображения при изменении размера экрана или изменении ориентации.

Дальнейшие подробности см по следующей ссылке

https://api.jquerymobile.com/orientationchange/

источник

2017-01-12 10:29:58 Abi

Спасибо за ваш ответ, и я думал сделать то же самое, но поправьте меня, если я ошибаюсь, я думаю, что могу поместить только 1 img для каждого варианта ориентации (портрет, пейзаж), и в моем случае я нуждаюсь в них (слева, справа и справа), вот почему я немного запутался и хотел использовать функцию ориентации мобильного телефона jquery. – user7409024

Ну, это не так просто. Существует множество несоответствий между устройствами. Для этого вам, возможно, потребуется перейти на лучший подход. Не заново изобретая колесо, есть уже несколько больших библиотек для обнаружения наклона и движения.

Просто в качестве примера: в Full-Tilt Подписчиков ориентациями, определенных:

SCREEN_ROTATION_0  = 0 
SCREEN_ROTATION_90  = M_PI_2 
SCREEN_ROTATION_180  = M_PI 
SCREEN_ROTATION_270  = M_2_PI/3 
SCREEN_ROTATION_MINUS_90 = - M_PI_2

Вы можете получить угол, а затем перейти на другую страницу, соответственно. Чтобы проверить пример compass, вам понадобится реальное устройство.

источник

2017-01-12 18:58:28 deblocker

Изменить изображение на ориентации устройства jquery-mobile

ответ

Смежные вопросы