add workaround for old webkit
This commit is contained in:
parent
254bec0a48
commit
9ea7c32bfd
3 changed files with 16 additions and 6 deletions
|
@ -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 */
|
||||||
|
|
|
@ -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`);
|
||||||
|
|
|
@ -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) {
|
||||||
|
|
Loading…
Reference in a new issue