Pisanie posta na wąskim ekranie smartphone w orientacji poziomej

Mam telefon Samsung Galaxy S8. Jego proporcje ekranu nie wynoszą nawet 9:16, tylko 9:18.5, dlatego widok jest całkiem wąski...

W orientacji pionowej korzystanie z 4p jest w porządku. Jednak w pozycji poziomej edycja posta jest mocno utrudniona. Klawiatura systemowa zasłania prawie całą stronę, a przyklejony pasek 4p zasłania pole edycji na tyle, że już w ogóle nic nie widać. Tak że muszę albo obrócić telefon, albo pisać na ślepo...

W pozycji poziomej jakoś tak lepiej mi się pisze SMSy itp. więc fajnie by było jakby się dało coś zaradzić w Waszym CSSie na ten problem ;)

Załączam screeny edycji posta na obydwu orientacjach ekranu.

ale to w każdym telu jest podobnie z małymi różnicami, ja stosuje fenomenalną habit browser i tam w ogóle wyłączyłem pasek górny zastępując go bardzo fajnymi skrótami bocznymi, ogólnie polecam, możliwości edycyjne akurat dla programmera

Proponowałbym dostosować layout mobilny do formatu 41:9 (może za x lat wejdą takie proporcje). Obecnie widziałem już normalne monitory z proporcja 32:9.

A tak na serio to nie wina 4p, że masz telefon z taka proporcja.

Oczywiście to nie wina 4p... Ale skoro przy tak niewielkiej różnicy proporcji nie widać tego co istotne (pola edycji), to można chociaż zmienić, żeby pasek 4p nie był sticky. Wtedy nie będzie nic zasłaniało pola edycji. Wystarczy odpowiednie media query, które dla danych proporcji ekranu odklei górną belkę: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

https://jsfiddle.net/JasonSpine/4ahoknf0/57/

Przetestujcie sobie, można zmieniać wielkość viewportu chwytając za brzegi i przeciągając. Testowałem na Chrome na telefonie - ten CSS tam działa. Wydaje mi się, że wartości jakie tam wprowadziłem, wystarczą do pisania postów na 4programmers na telefonie i nie będą uciążliwe na PC.

Można wejść z telefonu, żeby przetestować pole tekstowe:
https://fiddle.jshell.net/JasonSpine/4ahoknf0/57/show/light/

U mnie jak klikam na pole tekstowe i pojawia się klawiatura, to zmienia się tło, więc ten zapis CSS działa na telefonie. Niestety jsfiddle też przykleja swoją belkę z napisem "result" więc nie zobaczymy nic na stronie... Ale na 4p wywalenie belki powinno wystarczyć.

Tutaj trzeba wziąć poprawkę na to, że to nie są proporcje ekranu, tylko proporcje przestrzeni jaką w danym momencie zajmuje strona w przeglądarce. Na screenie ode mnie, pod odliczeniu belki adresu i wirtualnej klawiatury, to jest mniej niż ćwiartka wysokości z ekranu o proporcjach 18.5:9.

@Adam Boduch
Jak to wprowadzicie, będę wdzięczny ;)

Spine napisał(a):

Oczywiście to nie wina 4p... Ale skoro przy tak niewielkiej różnicy proporcji nie widać tego co istotne (pola edycji), to można chociaż zmienić, żeby pasek 4p nie był sticky. Wtedy nie będzie nic zasłaniało pola edycji. Wystarczy odpowiednie media query, które dla danych proporcji ekranu odklei górną belkę: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

Rozwiązanie na szybko: jeżeli problemem jest tutaj górna belka, to możesz ją włączyć w ustawieniach swojego konta.

Możesz podesłać pull requesta na to?

Super, działa, dzięki!

W załączniku po i przed kliknięciem pola edycji na moim telefonie.