mirror of
https://github.com/SECTL/SecScore.git
synced 2026-07-19 21:14:21 +08:00
移动端适配:Android 默认竖屏并隐藏窗口控制,预留顶部状态栏安全区
This commit is contained in:
+18
-4
@@ -13,7 +13,7 @@ function MainContent(): React.JSX.Element {
|
|||||||
const location = useLocation()
|
const location = useLocation()
|
||||||
const { currentTheme } = useTheme()
|
const { currentTheme } = useTheme()
|
||||||
const [messageApi, contextHolder] = message.useMessage()
|
const [messageApi, contextHolder] = message.useMessage()
|
||||||
const { isIosDevice, isIosPhone } = useMemo(getIosDeviceInfo, [])
|
const { isIosDevice, isAndroidDevice, defaultPortraitMode } = useMemo(getMobileDeviceInfo, [])
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const api = (window as any).api
|
const api = (window as any).api
|
||||||
@@ -52,8 +52,8 @@ function MainContent(): React.JSX.Element {
|
|||||||
const [authVisible, setAuthVisible] = useState(false)
|
const [authVisible, setAuthVisible] = useState(false)
|
||||||
const [authPassword, setAuthPassword] = useState("")
|
const [authPassword, setAuthPassword] = useState("")
|
||||||
const [authLoading, setAuthLoading] = useState(false)
|
const [authLoading, setAuthLoading] = useState(false)
|
||||||
const [isPortraitMode, setIsPortraitMode] = useState(isIosPhone)
|
const [isPortraitMode, setIsPortraitMode] = useState(defaultPortraitMode)
|
||||||
const [sidebarCollapsed, setSidebarCollapsed] = useState(isIosPhone)
|
const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultPortraitMode)
|
||||||
const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false)
|
const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false)
|
||||||
const [syncConflictVisible, setSyncConflictVisible] = useState(false)
|
const [syncConflictVisible, setSyncConflictVisible] = useState(false)
|
||||||
const [syncConflicts, setSyncConflicts] = useState<
|
const [syncConflicts, setSyncConflicts] = useState<
|
||||||
@@ -347,7 +347,7 @@ function MainContent(): React.JSX.Element {
|
|||||||
hasAnyPassword={hasAnyPassword}
|
hasAnyPassword={hasAnyPassword}
|
||||||
onAuthClick={() => setAuthVisible(true)}
|
onAuthClick={() => setAuthVisible(true)}
|
||||||
onLogout={logout}
|
onLogout={logout}
|
||||||
showWindowControls={!isIosDevice}
|
showWindowControls={!isIosDevice && !isAndroidDevice}
|
||||||
isPortraitMode={isPortraitMode}
|
isPortraitMode={isPortraitMode}
|
||||||
sidebarCollapsed={sidebarCollapsed}
|
sidebarCollapsed={sidebarCollapsed}
|
||||||
floatingExpand={isPortraitMode}
|
floatingExpand={isPortraitMode}
|
||||||
@@ -519,6 +519,20 @@ function getIosDeviceInfo(): { isIosDevice: boolean; isIosPhone: boolean } {
|
|||||||
isIosPhone: isIosDevice && !isIosTablet,
|
isIosPhone: isIosDevice && !isIosTablet,
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getMobileDeviceInfo(): {
|
||||||
|
isIosDevice: boolean
|
||||||
|
isAndroidDevice: boolean
|
||||||
|
defaultPortraitMode: boolean
|
||||||
|
} {
|
||||||
|
const { isIosDevice, isIosPhone } = getIosDeviceInfo()
|
||||||
|
const isAndroidDevice = navigator.userAgent.toLowerCase().includes("android")
|
||||||
|
return {
|
||||||
|
isIosDevice,
|
||||||
|
isAndroidDevice,
|
||||||
|
defaultPortraitMode: isIosPhone || isAndroidDevice,
|
||||||
|
}
|
||||||
|
}
|
||||||
function App(): React.JSX.Element {
|
function App(): React.JSX.Element {
|
||||||
return (
|
return (
|
||||||
<ThemeProvider>
|
<ThemeProvider>
|
||||||
|
|||||||
@@ -58,6 +58,10 @@ html.platform-ios #root {
|
|||||||
min-height: 0;
|
min-height: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
html.platform-android {
|
||||||
|
--ss-safe-area-top: max(env(safe-area-inset-top, 0px), 24px);
|
||||||
|
}
|
||||||
|
|
||||||
input,
|
input,
|
||||||
textarea {
|
textarea {
|
||||||
user-select: text;
|
user-select: text;
|
||||||
|
|||||||
@@ -129,6 +129,7 @@ disableTouchZoom()
|
|||||||
const platform = navigator.userAgent.toLowerCase()
|
const platform = navigator.userAgent.toLowerCase()
|
||||||
const isAppleTouchDevice = platform.includes("macintosh") && navigator.maxTouchPoints > 1
|
const isAppleTouchDevice = platform.includes("macintosh") && navigator.maxTouchPoints > 1
|
||||||
const isIos = /iphone|ipad|ipod/.test(platform) || isAppleTouchDevice
|
const isIos = /iphone|ipad|ipod/.test(platform) || isAppleTouchDevice
|
||||||
|
const isAndroid = platform.includes("android")
|
||||||
const isMacDesktop = platform.includes("mac") && !isIos
|
const isMacDesktop = platform.includes("mac") && !isIos
|
||||||
|
|
||||||
if (isMacDesktop) {
|
if (isMacDesktop) {
|
||||||
@@ -139,6 +140,10 @@ if (isIos) {
|
|||||||
document.documentElement.classList.add("platform-ios")
|
document.documentElement.classList.add("platform-ios")
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (isAndroid) {
|
||||||
|
document.documentElement.classList.add("platform-android")
|
||||||
|
}
|
||||||
|
|
||||||
window.addEventListener("error", (e: any) => {
|
window.addEventListener("error", (e: any) => {
|
||||||
const error = e?.error
|
const error = e?.error
|
||||||
safeWriteLog({
|
safeWriteLog({
|
||||||
|
|||||||
Reference in New Issue
Block a user