Some mobile rotation issue

Infinityhost · Mar 23, 2023

Hello.
Can anyone tell me what is wrong with this code?
I want html element to fill whole area.

<html lang="Pl" >
<head><meta name="viewport" content="width=device-width, initial-scale=1/">
<meta charset="UTF8">
<style>
@media screen and (max-width: 900px){
html{background-color:green;display:fixed;position:absolute;border:2px solid red;transform:rotate(90deg);min-width:100vh;min-height:100vw;max-width:100vh;max-height:100vw;width:100vh;height:100vw;}
}
</style> </head>
<body >aa
</body>
</html>

Phro0244 · Apr 19, 2023

There are a couple of issues with your code:

The display property should be set to block, not fixed.
The position property should be set to fixed, not absolute.
The transform property should be set to rotate(90deg) translateX(-100%), not just rotate(90deg).
The min-width, min-height, max-width, and max-height properties should be swapped with each other. The min-width and max-height properties should be set to 100vh, and the min-height and max-width properties should be set to 100vw.
You have a stray "aa" in the body of the HTML.

Here's the corrected code:


[CODE=html]<html lang="Pl">
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1/">
  <meta charset="UTF8">
  <style>
    @media screen and (max-width: 900px) {
      html {
        background-color: green;
        display: block;
        position: fixed;
        border: 2px solid red;
        transform: rotate(90deg) translateX(-100%);
        min-width: 100vh;
        max-height: 100vw;
        max-width: 100vh;
        min-height: 100vw;
      }
    }
  </style>
</head>
<body>
</body>
</html>
[/CODE]

Infinityhost · Apr 20, 2023

Well...
For Redmi 9A needed to write this (so It look like YouTube in fullscreen)

if(screen.height==800 && screen.width==360){document.documentElement.setAttribute('style','background-color:black;display:fixed;position:absolute;border:5px solid black;transform:rotate(90deg);min-width:92vh;min-height:98vw;width:92vh;height:98vw;max-width:92vh;max-height:98vw;object-fit:cover;object-position:top top;max-inline-size: 100%;block-size: auto;left:-44.5%;top:23.9%;');document.querySelectorAll('IFRAME')[0].setAttribute('style','position:absolute;display:fixed;top:9.3%;left:0%;width:98.2%;height:89%;max-height:89%;border:0px solid black;');

what interesting is --- "left:-44.5%;" Don't know why, but it works. For one device.
Don't remember if need top also move but I think I do(and also -44.5%).
Some global constant? :|

http://infinityhost.ct8.pl/

FResher · Apr 20, 2023

Hello !

as 'rotation' of the screen is automatic on a device.
why do you use a rotation of 90 degrees ? it's already ready to rotate.

you just have to keep you 900 limit as value to switch between one display to another.
you'll get an easy code without the 'rotate' statement.

Infinityhost · Apr 20, 2023

"
as 'rotation' of the screen is automatic on a device.
why do you use a rotation of 90 degrees ? it's already ready to rotate." - YouTybe fullscreen rotates automatically, my webpage needs to rotate function (I'm still thinking about this solution, but I uploaded some videos and they look, I guess better when they are rotated on mobile devices.

I'll try to explain it this way, when I rotate screen, it is moved beyond the visible area, need to add this left:-44%

Working on mobile css menu with plenty of frustration!	2	Dec 29, 2022
Not sure why drop-down is not working.	2	Mar 24, 2024
How to have two html audio players on one page?	0	May 3, 2022
An unknown bug doesn't allow the quotes app to work. What's the issue?	3	Apr 23, 2023
Help with my responsive home page	2	Dec 14, 2022
Having difficulty with the layout of these images / video for this web page	2	Jul 5, 2022
CSS: How can I stop overflow on the y-axis?	2	Dec 24, 2022
Need assistance finetuning HTML, CSS, Javascript - sticky header issue	3	Feb 25, 2022

Some mobile rotation issue

Infinityhost

Attachments

Phro0244

Infinityhost

Attachments

FResher

Infinityhost

Ask a Question

Similar Threads

Members online

Forum statistics

Latest Threads