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.
-
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?
-
Adres ma postać
file:///storage/emulated/0/JakisKatalog/JakisPlik.htm
. Jak zmusić Firefox do uruchomienia tej aplikacji offline? W komputerze, jak wgrywam plik, to katalogfile:///storage/emulated/0/
jest katalogiem głównym obszaru widzianego w komputerze.