Android - rozdzielczość ekranu w Chrome

Napisałem na własne potrzeby aplikację HTML5/JS, która generuje bitmapę (obiekt canvas) o wielkości takiej, jak wnętrze okna przeglądarki.

Aplikacja odczytuje wielkość okna przeglądarki i może pracować w całkowicie dowolnej rozdzielczości. Na komputerze wszystko jest bardzo ładnie, natomiast na smartfonie obraz jest brzydki, szczególnie, jak są małe elementy i ostre krawędzie, po prostu obraz jest rozmyty. Ustaliłem, że przeglądarka "widzi" inną rozdzielczość, niż faktyczna rozdzielczość ekranu. Jak aplikację przerobiłem tak, żeby zamiast bitmapy był svg, to na smartfonie wygląda o wiele lepiej, tak, jak powinna.

Rozdzielczość przeglądarki odczytuję za pomocą window.innerWidth i window.innerHeight. Jak uruchomię w Chrome na androidzie, to ma rozdzielczość 360x600, a jak włączę "wersja na komputer", to ma rozdzielczość 980x1633. Co prawda, pasek z adresem zabiera pewną powierzchnię, ale to i tak nijak nie pasuje do rzeczywistej rozdzielczości ekranu smartfonu. Wersja na komputer z canvas wygląda trochę lepiej, ale ciągle nie to, czego oczekiwałem. Doczytałem, że faktyczna rozdzielczość ekranu w tym smartfonie to 2160x1080.

Aplikację wyposażyłem w tryb pełnego ekranu, który włączam poprzez taką funkcję (co drugie uruchomienie włącza i wyłącza pełny ekran):

function ToggleFullScreen()
{
    var VideoElement = document.getElementById("app");
    if (!document.mozFullScreen && !document.webkitIsFullScreen && !document.fullscreen)
    {
        if (VideoElement.mozRequestFullScreen)
        {
            VideoElement.mozRequestFullScreen();
        }
        else
        {
            if (VideoElement.webkitRequestFullScreen)
            {
                VideoElement.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
            }
            else
            {
                if (VideoElement.requestFullscreen)
                {
                    VideoElement.requestFullscreen();
                }
            }
        }
    }
    else
    {
        if (document.mozCancelFullScreen)
        {
            document.mozCancelFullScreen();
        }
        else
        {
            if (document.webkitCancelFullScreen)
            {
                document.webkitCancelFullScreen();
            }
            else
            {
                if (document.exitFullscreen)
                {
                    document.exitFullscreen();
                }
            }
        }
    }
}

Na pełnym ekranie, domyślna rozdzielczość to 360x680, a jak włączę wersję na komputer, to po włączeniu pełnego ekranu wraca wersja mobilna, więc nie jestem w stanie sprawdzić rozdzielczości. Już nie wspomnę o tym, że rozdzielczość fizyczna 1080x2160 nie jest proporcjonalna do prezentowanej rozdzielczości 680x360, a w trybie pełnoekranowym nie ma żadnego paska, który zajmuje powierzchnię. Gdyby nie problem z brzydkimi bitmapami, to działanie aplikacji w obu trybach jest identyczne i zgodne z oczekiwanym.

Chciałem ten sam test zrobić w mobilnym Firefox, ale w nim w ogóle nie udało się uruchomić aplikacji. Aplikację chce uruchamiać jako offline, z pliku zapisanego w pamięci smartfonu, tylko w Chrome się udaje, a w Firefox jest pusta strona, nie ma ani błędu, ani śladu mojej aplikacji. Na komputerze z Windows lub Linux w przeglądarce Firefox działa prawidłowo.

1. Jak spowodować, żeby w Chrome aplikacja działała w natywnej rozdzielczości, ewentualnie natywna rozdzielczość podzielona przez 2, a nie w jakiejś wymyślnej, która nie pasuje do natywnej i sprawia, że bitmapy są brzydkie?

2. Adres ma postać file:///storage/emulated/0/JakisKatalog/JakisPlik.htm. Jak zmusić Firefox do uruchomienia tej aplikacji offline? W komputerze, jak wgrywam plik, to katalog file:///storage/emulated/0/ jest katalogiem głównym obszaru widzianego w komputerze.

andrzejlisek napisał(a):

Jak spowodować, żeby w Chrome aplikacja działała w natywnej rozdzielczości, ewentualnie natywna rozdzielczość podzielona przez 2, a nie w jakiejś wymyślnej, która nie pasuje do natywnej i sprawia, że bitmapy są brzydkie?

Chyba nie rozumiesz, że przeglądarka tak nie działa i nie będzie ci raportować natywnej rozdzielczości. To, co raportuje zależy od dpi w systemie i będzie inaczej na każdym telefonie.

P.S. na programowaniu webowym słabo się znam, ale jeśli interesuje cię bezwzględna rozdzielność wyrażona w liczbach i od tych wartości uzależniasz coś bezpośrednio w swojej aplikacji to prawie na pewno robisz to źle.

Da się to zrobić.

const width = window.screen.width * window.devicePixelRatio; // szerokość
const height = window.screen.height * window.devicePixelRatio; // wysokość