Я создаю сайт специально для мобильных устройств. В частности, есть одна страница, которую лучше всего просматривать в альбомной ориентации.
Есть ли способ определить, просматривает ли пользователь, посещающий эту страницу, ее в портретном режиме и, если да, отобразить сообщение, информирующее пользователя о том, что эту страницу лучше всего просматривать в альбомном режиме? Если пользователь уже просматривает его в ландшафтном режиме, сообщение не появится.
Поэтому я хочу, чтобы сайт определял ориентацию области просмотра, если ориентация - « Портрет» , а затем отображал предупреждение, сообщающее пользователю, что эту страницу лучше всего просматривать в альбомном режиме.
orientationchange
событием. Он покажет старую ориентацию вместо новой ориентации. Этот ответ хорошо работает в сочетании сorientationchange
событием.Вы также можете использовать то
window.matchMedia
, что я использую и предпочитаю, так как оно очень похоже на синтаксис CSS:Проверено на iPad 2.
источник
У Дэвида Уолша лучший и точечный подход.
Во время этих изменений свойство window.orientation может измениться. Значение 0 означает книжную ориентацию, -90 означает, что устройство повернуто по горизонтали вправо, а 90 означает, что устройство повернуто по горизонтали влево.
http://davidwalsh.name/orientation-change
источник
Вы можете использовать CSS3:
источник
Есть несколько способов сделать это, например:
window.orientation
значениеinnerHeight
сinnerWidth
Вы можете адаптировать один из методов ниже.
Проверьте, находится ли устройство в портретном режиме
Проверьте, находится ли устройство в альбомном режиме
Пример использования
Как я могу определить изменение ориентации?
источник
Я думаю, что более стабильным решением является использование экрана вместо окна, потому что это может быть как - альбомная или портретная, если вы измените размер окна браузера на настольном компьютере.
источник
Чтобы применить все эти замечательные комментарии к моему ежедневному кодированию, для обеспечения преемственности между всеми моими приложениями, я решил использовать следующее в своем мобильном коде jquery и jquery.
источник
Не пытайтесь фиксировать запросы window.orientation (0, 90 и т. Д. Не означает портрет, ландшафт и т. Д.):
http://www.matthewgifford.com/blog/2011/12/22/a-misconception-about-window-orientation/
Даже на iOS7 в зависимости от того, как вы заходите в браузер 0 не всегда портрет
источник
После некоторых экспериментов я обнаружил, что вращение ориентированного на ориентацию устройства всегда будет вызывать
resize
событие окна браузера . Так что в вашем обработчике изменения размера просто вызовите функцию вроде:источник
Я объединил два решения, и оно прекрасно работает для меня.
источник
Я не согласен с наиболее проголосовавшим ответом. Использовать
screen
и неwindow
Это правильный способ сделать это. Если вы рассчитываете с
window.height
, у вас будут проблемы на Android. Когда клавиатура открыта, окно сжимается. Так что используйте экран вместо окна.Это
screen.orientation.type
хороший ответ, но с IE. https://caniuse.com/#search=screen.orientationисточник
Получить ориентацию (в любое время в вашем коде JS) через
Когда
window.orientation
возвращается,0
или180
вы находитесь в портретном режиме , когда вы возвращаетесь,90
или270
тогда вы находитесь в ландшафтном режиме .источник
Только CCS
В некоторых случаях вы можете захотеть добавить небольшой кусочек кода, чтобы перезагрузить страницу после того, как посетитель повернул устройство, чтобы CSS правильно отображался:
источник
источник
источник
Еще одна альтернатива для определения ориентации, основанная на сравнении ширины / высоты:
Вы используете его для события "resize":
источник
iOS не обновляется
screen.width
иscreen.height
когда меняется ориентация. Android не обновляетсяwindow.orientation
при его изменении.Мое решение этой проблемы:
Вы можете обнаружить это изменение ориентации на Android и iOS с помощью следующего кода:
Если
onorientationchange
событие не поддерживается, привязанным событием будетresize
событие.источник
Если у вас установлены последние версии браузеров, они
window.orientation
могут не работать. В этом случае используйте следующий код для получения угла -Это все еще экспериментальная технология, вы можете проверить совместимость браузера здесь
источник
Спасибо tobyodavies за руководство.
Чтобы получить предупреждающее сообщение в зависимости от ориентации мобильного устройства, вам необходимо реализовать следующий сценарий в
function setHeight() {
источник
Вместо 270 это может быть -90 (минус 90).
источник
Это расширяет предыдущий ответ. Лучшее решение, которое я нашел, - создать безобидный атрибут CSS, который появляется только в случае удовлетворения медиазапроса CSS3, а затем выполнить тест JS для этого атрибута.
Так, например, в CSS у вас будет:
Затем вы переходите на JavaScript (я использую jQuery для забавы). Декларации цвета могут быть странными, поэтому вы можете использовать что-то еще, но это самый надежный метод, который я нашел для тестирования. Затем вы можете просто использовать событие изменения размера, чтобы узнать о переключении. Соберите все это для:
Лучшая часть этого заключается в том, что на момент написания этого ответа он не оказывал никакого влияния на интерфейсы рабочего стола, поскольку они (как правило) не передают (кажется) никаких аргументов для ориентации на страницу.
источник
Вот лучший метод, который я нашел, основываясь на статье Дэвида Уолша ( Обнаружение изменения ориентации на мобильных устройствах )
Объяснение:
Window.matchMedia () - это встроенный метод, который позволяет вам определять правило медиа-запроса и проверять его правильность в любой момент времени.
Я считаю полезным прикрепить
onchange
слушатель к возвращаемому значению этого метода. Пример:источник
Я использовал для Android Chrome "API Ориентация экрана"
Чтобы посмотреть текущую ориентацию, вызовите console.log (screen.orientation.type) (и, возможно, screen.orientation.angle).
Результаты: портретно-начальный | второстепенный портрет | ландшафтно-первичный | ландшафтном вторичный
Ниже мой код, я надеюсь, он будет полезен:
источник
источник
Объект окна в JavaScript на устройствах iOS имеет свойство ориентации, которое можно использовать для определения поворота устройства. Ниже показаны значения window.orientation для устройств iOS (например, iPhone, iPad, iPod) в разных ориентациях.
Это решение также работает для устройств Android. Я проверил в Android родной браузер (интернет-браузер) и в браузере Chrome, даже в старых версиях этого.
источник
Это то, что я использую.
Реализация
источник
источник
Есть способ, с помощью которого вы можете определить, переключил ли пользователь свое устройство в портретный режим, используя
screen.orientation
Просто используйте приведенный ниже код:
Теперь
onchange
будет срабатывать, когда пользователь переворачивает устройство, и всплывает предупреждение, когда пользователь использует портретный режим.источник
Стоит отметить,
window.orientation
что он вернется,undefined
если вы не находитесь на мобильном устройстве. Таким образом, хорошая функция для проверки ориентации может выглядеть следующим образом , гдеx
находитсяwindow.orientation
:Назовите это так:
источник
Или вы можете просто использовать это ..
источник