GithubBackup/MoviePilot-Frontend
1
0
Fork 0
mirror of https://github.com/jxxghp/MoviePilot-Frontend.git synced 2026-09-05 07:28:37 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor: optimize initial loading view and viewport synchronization logic for iOS standalone mode

Browse Source
This commit is contained in:
jxxghp
2026-05-11 12:45:20 +08:00
parent e9bed7ff8a
commit c97247b92b
2 changed files with 13 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+11 -12
View File
@@ -1,8 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh-CN" style=" <html lang="zh-CN" data-launch-loading="true" style="
overflow: hidden; overflow: hidden;
block-size: 100%;
min-block-size: 100%;
--safe-area-inset-bottom: env(safe-area-inset-bottom); --safe-area-inset-bottom: env(safe-area-inset-bottom);
--safe-area-inset-top: env(safe-area-inset-top); --safe-area-inset-top: env(safe-area-inset-top);
--initial-loader-bg: #0E1116; --initial-loader-bg: #0E1116;
@@ -101,14 +99,18 @@
body { body {
background: var(--initial-loader-bg, #0E1116); background: var(--initial-loader-bg, #0E1116);
background-color: var(--initial-loader-bg, #0E1116); background-color: var(--initial-loader-bg, #0E1116);
}
html[data-launch-loading="true"],
html[data-launch-loading="true"] body {
overflow: hidden; overflow: hidden;
} }
body { html[data-launch-loading="true"] body {
min-block-size: var(--initial-loader-height, 100svh); min-block-size: var(--initial-loader-height, 100svh);
} }
#app { html[data-launch-loading="true"] #app {
min-block-size: var(--initial-loader-height, 100svh); min-block-size: var(--initial-loader-height, 100svh);
background: var(--initial-loader-bg, #0E1116); background: var(--initial-loader-bg, #0E1116);
background-color: var(--initial-loader-bg, #0E1116); background-color: var(--initial-loader-bg, #0E1116);
@@ -118,23 +120,21 @@
#loading-bg { #loading-bg {
position: fixed; position: fixed;
inset-block-start: 0; inset: 0;
inset-inline-start: 0;
z-index: 99999; z-index: 99999;
display: block; display: block;
overflow: hidden; overflow: hidden;
background: var(--initial-loader-bg, #0E1116); background: var(--initial-loader-bg, #0E1116);
background-color: var(--initial-loader-bg, #0E1116); background-color: var(--initial-loader-bg, #0E1116);
block-size: var(--initial-loader-height, 100svh);
inline-size: 100%;
} }
.loading-shell { .loading-shell {
box-sizing: border-box; box-sizing: border-box;
display: grid; display: grid;
grid-template-rows: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
block-size: 100%; block-size: var(--initial-loader-height, 100svh);
inline-size: 100%; inline-size: 100%;
min-block-size: var(--initial-loader-height, 100svh);
transition: opacity 0.12s ease-out, transform 0.12s ease-out; transition: opacity 0.12s ease-out, transform 0.12s ease-out;
padding: padding:
calc(env(safe-area-inset-top, 0px) + 24px) calc(env(safe-area-inset-top, 0px) + 24px)
@@ -305,7 +305,7 @@
primaryColor = '#9155FD' primaryColor = '#9155FD'
} }
// 在应用脚本接管前锁定一次启动期视口，避免 iOS 独立模式首次重算 safe area 时把 logo 顶下去。 // 在应用脚本接管前锁定一次启动层内容高度，避免 iOS 独立模式首次重算 safe area 时把 logo 顶下去。
function syncInitialViewport(force) { function syncInitialViewport(force) {
const viewport = window.visualViewport const viewport = window.visualViewport
const nextHeight = Math.round(viewport?.height || window.innerHeight || document.documentElement.clientHeight || 0) const nextHeight = Math.round(viewport?.height || window.innerHeight || document.documentElement.clientHeight || 0)
@@ -325,7 +325,6 @@
document.documentElement.style.setProperty('--initial-loader-height', `${nextHeight}px`) document.documentElement.style.setProperty('--initial-loader-height', `${nextHeight}px`)
document.documentElement.style.setProperty('--initial-loader-width', `${nextWidth}px`) document.documentElement.style.setProperty('--initial-loader-width', `${nextWidth}px`)
document.documentElement.style.setProperty('--vh', `${nextHeight * 0.01}px`)
} }
// 应用主题色彩 // 应用主题色彩
src/App.vue
+2 -1
View File
@@ -142,7 +142,8 @@ function animateAndRemoveLoader() {
window.setTimeout(() => { window.setTimeout(() => {
removeEl('#loading-bg') removeEl('#loading-bg')
// 启动阶段会锁定根节点滚动，待应用布局接管后再恢复，避免首屏出现瞬时纵向滚动条。 // 启动阶段的根节点锁定只在 loader 存在时生效，移除后恢复正常页面与弹窗布局。
document.documentElement.removeAttribute('data-launch-loading')
document.documentElement.style.removeProperty('overflow') document.documentElement.style.removeProperty('overflow')
document.body.style.removeProperty('overflow') document.body.style.removeProperty('overflow')
}, 120) }, 120)