How to implement the effect "rotate your device for a more comfortable display of the site" in portrait view from mobile devices?

Question

css

Hello everyone) thank you very much decided to take the time to my question! :)
I'm very new to web dev :)
The problem is the following:
I want to implement the effect "rotate your device for a more comfortable display of the site" so that a certain backgroud img/rotate.jpg is loaded on mobile devices in portrait mode and that it is beautifully displayed.
That's how it doesn't work

, so I don't try, I either have a white screen in portrait view or the fear of God))))
That's the only thing that can be realized.
custom 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: 'поверните Ваше устройство для более комфортного отображения сайта';
  }

It would be ideal to replace the text message in my code with a background image from img/rotate.jpg
or a js solution, but here everything is very bad for me(
I honestly used search engines, but I can’t apply the knowledge to make it look beautiful(
Thank you in advance for your valuable suggestions !

Answer 1

For those who are bad with JS javascript
, you need to create custom css in 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

The script is very easy to do:

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('Портретная');
    }

Something like that.
In fact, let the user choose the orientation in which to view the site.

Answer 3

Look in the direction of js, although css should work, here are a few links that I found, I didn’t have time to check, if the question is relevant - I’ll look tomorrow.
Deviceorientation
css option