При повороте устройства не каждый раз элемент меняет заданные стили
Уважаемые коллеги, доброго времени суток.
Встал вопрос, при создании плагина jquery просмотра картинок на сайте, как отследить поворот экрана или смену ориентации устройства. Суть в следующем, при клике на картинку она всплывает либо height = 100% либо width = 100%. Все работает отлично на всех устройствах от 320px до бесконечности. НО!!! Смотрю я его работу на iphone 4s (на самом деле не важно на каком), и если я разворачиваю картинку и меняю ориентацию она не адаптируется под новые размеры. Помогает закрыть и открыть заново картинку. Но это я думаю не правильно. Хотя если честно просмотрел кучу плагинов jquery и у 99% есть такой недочет. Ну да ладно. Суть вопроса к знатокам. Может кто то пробовал решать подобную проблему именно методами jquery и без использования jq_mobile и т.д. Буду благодарен, за помощь |
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>Foto preview v_2</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
* {margin: 0;padding: 0;box-sizing: border-box;}
img {display: block;width: 100%;position: absolute;left: 50%;top:50%;transform: translate(-50%,-50%);}
html, body {width: 100%;height: 100%;}
</style>
</head>
<body>
<img src="gallery/60.jpg" alt="">
<script>
$(document).ready(function() {
function changeImgSize() {
var $win_width = $(window).width(),
$win_height = $(window).height(),
$img_preview = $("img"),
$img_width = $img_preview.width(),
$img_height = $img_preview.height();
if ($win_width < $win_height) {
elementFullWidth($img_preview);
} else if ($win_width > $win_height) {
elementFullHeight($img_preview);
}
}
function visibleElement(element) {element.css({"opacity":"1"});}
function invisibleElement(element) {element.css({"opacity":"0"});}
function elementFullHeight(element) {element.css({"width":"auto","height":"100" + "%"});}
function elementFullWidth(element) {element.css({"width":"100" + "%","height":"auto"});}
function elementAutoSize(element) {element.css({"width":"auto","height":"auto"});}
$(window).on("orientationchange", changeImgSize);
});
</script>
</body>
</html>
Вот пример кода |
Роман Андреевич,
может попробовать не ready
$(window).load(function() {
|
Вся суть в том, что изображение уже загружено. И когда его смотришь на телефоне то при повороте оно должно подстраиваться. Вот
|
Роман Андреевич,
может так ? ("orientationchange resize", |
мучаюсь с условиями. Может тут косяк. Само событие срабатывает. Но картинка вылазит постоянно
|
Короче говоря, событие работает, но картинка не правильно отображается. Вылазит постоянно за пределы viewport
|
Роман Андреевич,
может измерять истинные размеры картинки а не текущие? |
Роман Андреевич,
$img_width = $img_preview[0].naturalWidth ,
$img_height = $img_preview[0].naturalHeight;
|
| Часовой пояс GMT +3, время: 22:33. |