add workaround for old webkit

This commit is contained in:
hippoz 2022-09-02 15:25:47 +03:00
parent 254bec0a48
commit 9ea7c32bfd
No known key found for this signature in database
GPG key ID: 7C52899193467641
3 changed files with 16 additions and 6 deletions

View file

@ -73,9 +73,6 @@ html, body {
color-scheme: dark; color-scheme: dark;
accent-color: var(--purple-2); accent-color: var(--purple-2);
width: var(--viewportWidth);
height: var(--viewportHeight);
} }
body { body {
@ -90,6 +87,9 @@ body {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
width: var(--viewportWidth);
height: var(--viewportHeight);
} }
/* fullscreen message */ /* fullscreen message */

View file

@ -8,6 +8,9 @@ function initViewportSizeHandler() {
if (method === "dynamicViewportUnits") { if (method === "dynamicViewportUnits") {
root.style.setProperty("--viewportWidth", "100dvw"); root.style.setProperty("--viewportWidth", "100dvw");
root.style.setProperty("--viewportHeight", "100dvh"); root.style.setProperty("--viewportHeight", "100dvh");
} else if (method === "webkitHack") {
root.style.setProperty("--viewportWidth", "100vw");
root.style.setProperty("--viewportHeight", "-webkit-fill-available");
} else if (method === "javascriptResponsive") { } else if (method === "javascriptResponsive") {
const updateUnits = () => { const updateUnits = () => {
root.style.setProperty("--viewportWidth", `${window.innerWidth}px`); root.style.setProperty("--viewportWidth", `${window.innerWidth}px`);

View file

@ -19,9 +19,13 @@ const defaults = {
return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop"; return (window.navigator && window.navigator.maxTouchPoints > 0) ? "touch" : "desktop";
}, },
"ui:useragent:viewportSizeJustificationMethod": () => { "ui:useragent:viewportSizeJustificationMethod": () => {
const isTouch = getItem("ui:useragent:formFactor") === "touch";
if (CSS.supports("(width: 1dvw)")) { if (CSS.supports("(width: 1dvw)")) {
return "dynamicViewportUnits"; return "dynamicViewportUnits";
} else if (getItem("ui:useragent:formFactor") === "touch") { } else if (isTouch && CSS.supports("(-webkit-touch-callout: none)")) {
return "webkitHack";
} else if (isTouch) {
return "javascriptResponsive"; return "javascriptResponsive";
} else { } else {
return "normalUnits"; return "normalUnits";
@ -61,10 +65,15 @@ export function init() {
if (!persistentProvider) if (!persistentProvider)
return; return;
didCacheProvider = true;
store.forEach((defaultValue, key) => { store.forEach((defaultValue, key) => {
const override = persistentProvider.getItem(key); const override = persistentProvider.getItem(key);
if (override !== null) { if (override !== null) {
try { try {
if (typeof defaultValue === "function") {
defaultValue = defaultValue();
}
store.set(key, typeof defaultValue === "string" ? override : JSON.parse(override)); store.set(key, typeof defaultValue === "string" ? override : JSON.parse(override));
} catch (o_O) { } catch (o_O) {
console.warn("[Storage]", `init(): An exception was thrown while parsing the value of key "${key}" from persistentProvider. The key "${key}" will be removed from persistentProvider.`, o_O); console.warn("[Storage]", `init(): An exception was thrown while parsing the value of key "${key}" from persistentProvider. The key "${key}" will be removed from persistentProvider.`, o_O);
@ -72,8 +81,6 @@ export function init() {
} }
} }
}); });
didCacheProvider = true;
} }
export function apiRoute(fragment) { export function apiRoute(fragment) {