Ja ustawić właściwości responsive w kilku obiektach?

0

Witam.
Mam mały problem, potrzebuję ustawić odpowiednie wyświetlanie na różnych urządzeniach, jak daję w document.body.onLoad (nie chcę używać skryptów)

onload="if(screen.width<screen.height){document.documentElement.setAttribute('style','transform:rotate(90deg);');};"

To mi wychodzi coś takiego
111111.jpg
W środku strony jest ramka, jak ją rozszerzyć na szerokość okna?

Jak daję taki zapis

onLoad="if(screen.width<screen.height){document.documentElement.setAttribute('style','background-color:green;border:2px solid 
red;transform:rotate(90deg);width:'+screen.height+'px;height:'+screen.availWidth+'px;');"

Wychodzi coś takiego (czerwona obramówka to granice HTML
111111.jpg

2

Pierwsza sprawa to nie rób tego w ten sposób skryptem, tylko skorzystaj z tego co oferuje CSS od wielu lat, czyli z bloku media query: https://www.w3schools.com/cssref/css3_pr_mediaquery.php, bo się zajedziesz przy więcej niż kilku elementach.
Możliwe, że jest tam jakiś margines czy coś, ale to pewnie trzeba by w DevToolsach najpierw patrzyć po kolei.

0

@mar-ek1: ale zobacz , zrobiłem pusty czysty dokument i wyszło to
111111.jpg
To jest cały kod

<html lang="Pl">
    <head><meta name="viewport" content="width=device-width,height=device-height initial-scale=1">
        <meta charset="UTF8">

    </head>
<body onLoad="if(screen.width<screen.height){
document.documentElement.setAttribute('style','background-color:green;display:fixed;
border:2px solid red;transform:rotate(90deg);width:'+window.outerHeight+'px;
height:'+window.outerWidth+'px;');};">
</body>
</html>
0

weź obczaj media queries w CSS:
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://css-tricks.com/a-complete-guide-to-css-media-queries/

a na tej stronie masz nawet jakiś kurs o responsive web design:
https://web.dev/learn/design/

1 użytkowników online, w tym zalogowanych: 0, gości: 1