Как реализовать эффект «поверните Ваше устройство для более комфортного отображения сайта» при портретном просмотре с мобильных?

Question

[egorov-trade]

Всем привет) спасибо огромное решили уделить время моему вопросу! :)
Очень сильно новичок в деле web dev :)

Проблема следующая:
Хочу реализовать эффект "поверните Ваше устройство для более комфортного отображения сайта", чтобы на мобильных устройствах при портретном загружался определенный backgroud img/rotate.jpg и чтобы он красиво отображался.
Вот так


но не выходит, чтобы я не пробовал, у меня или белый экран при портретном просмотре или страх божий))))

Вот единственное, что получается реализовать.
Кастомный css

/* 19 rotate
----------------------------------------------------------------------------- */
@media only screen and (max-width: 519px) and (orientation: portrait) {
	body {
		display: none;
	}
	
	html:after {
		position: absolute;
		left: 0;
		bottom: 0;
		right: 0;
		color: #000;
		text-align: center;
		padding: 5%;
		top: 50%;
		font-family: Open Sans, sans-serif; 
		font-size: 16px;
		content: 'поверните Ваше устройство для более комфортного отображения сайта';
	}

Идеально было бы заменить в моем коде текстовое сообщение на картинку background из img/rotate.jpg

или решение на js, но здесь у меня все очень плохо(

Честно пользовался поисковиками, но не получается применить знания чтобы получилось красиво(

Заранее благодарю за Ваши ценные указания!

Answer 1

[egorov-trade]

Для тех у кого плохо с JS javascript

необходимо создать кастомный css в slyles.css

/* 19 Rotate
----------------------------------------------------------------------------- */
@media only screen and (max-width: 600px) and (orientation: portrait) {

	body {
		display: none;
		background: url(../img/rotate.jpg);
		background-repeat: no-repeat; 
		background-position: center center; 
		background-size: cover; 
		-webkit-background-size: cover;
		background-attachment: fixed;

Answer 2

[Александр Петров]

Скриптом очень просто будет сделать:

if(document.all){
        var width = document.body.clientWidth;
        var height = document.body.clientHeight;
    }else{
        var width = innerWidth;
        var height = innerHeight;
    } 

    if(width>height){
        alert('Альбомная');
        $('.error_orientation').show();
    }else{
        alert('Портретная');
    }

Что-то типа того.
На самом деле пусть пользователь сам выбирает в какой ориентации ему смотреть сайт.

Comments

[egorov-trade]

а как картинку-то к бэкгроунд прикрепить?

[Валентин]

egorov-trade: скрывайте\показывайте div с картинкой и текстом, всё

[Александр Петров]

egorov-trade: .error_orientation - это типа класс картинки которая будет показываться.

Answer 3

[arab789]

Посмотрите в сторону js, хотя и css должен работать, вот несколько ссылок, что нашел, проверить не успел, если вопрос будет актуален - завтра гляну.
Deviceorientation
css вариант

Comments

[egorov-trade]

я смотрю в сторону js,
if(window.innerHeight > window.innerWidth){
if(window.innerHeight < "519"){
alert("Please use landscape!");
}
}
здесь я не понимаю куда мне это вставить,
и как заменить alert на background из img/rotate.jpg