移动端适配:Android 默认竖屏并隐藏窗口控制,预留顶部状态栏安全区

This commit is contained in:
JSR
2026-03-19 20:43:07 +08:00
parent cd178b2400
commit f1010702d3
3 changed files with 27 additions and 4 deletions
+18 -4
View File
@@ -13,7 +13,7 @@ function MainContent(): React.JSX.Element {
const location = useLocation()
const { currentTheme } = useTheme()
const [messageApi, contextHolder] = message.useMessage()
const { isIosDevice, isIosPhone } = useMemo(getIosDeviceInfo, [])
const { isIosDevice, isAndroidDevice, defaultPortraitMode } = useMemo(getMobileDeviceInfo, [])
useEffect(() => {
const api = (window as any).api
@@ -52,8 +52,8 @@ function MainContent(): React.JSX.Element {
const [authVisible, setAuthVisible] = useState(false)
const [authPassword, setAuthPassword] = useState("")
const [authLoading, setAuthLoading] = useState(false)
const [isPortraitMode, setIsPortraitMode] = useState(isIosPhone)
const [sidebarCollapsed, setSidebarCollapsed] = useState(isIosPhone)
const [isPortraitMode, setIsPortraitMode] = useState(defaultPortraitMode)
const [sidebarCollapsed, setSidebarCollapsed] = useState(defaultPortraitMode)
const [floatingSidebarExpanded, setFloatingSidebarExpanded] = useState(false)
const [syncConflictVisible, setSyncConflictVisible] = useState(false)
const [syncConflicts, setSyncConflicts] = useState<
@@ -347,7 +347,7 @@ function MainContent(): React.JSX.Element {
hasAnyPassword={hasAnyPassword}
onAuthClick={() => setAuthVisible(true)}
onLogout={logout}
showWindowControls={!isIosDevice}
showWindowControls={!isIosDevice && !isAndroidDevice}
isPortraitMode={isPortraitMode}
sidebarCollapsed={sidebarCollapsed}
floatingExpand={isPortraitMode}
@@ -519,6 +519,20 @@ function getIosDeviceInfo(): { isIosDevice: boolean; isIosPhone: boolean } {
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 {
return (
<ThemeProvider>
+4
View File
@@ -58,6 +58,10 @@ html.platform-ios #root {
min-height: 0;
}
html.platform-android {
--ss-safe-area-top: max(env(safe-area-inset-top, 0px), 24px);
}
input,
textarea {
user-select: text;
+5
View File
@@ -129,6 +129,7 @@ disableTouchZoom()
const platform = navigator.userAgent.toLowerCase()
const isAppleTouchDevice = platform.includes("macintosh") && navigator.maxTouchPoints > 1
const isIos = /iphone|ipad|ipod/.test(platform) || isAppleTouchDevice
const isAndroid = platform.includes("android")
const isMacDesktop = platform.includes("mac") && !isIos
if (isMacDesktop) {
@@ -139,6 +140,10 @@ if (isIos) {
document.documentElement.classList.add("platform-ios")
}
if (isAndroid) {
document.documentElement.classList.add("platform-android")
}
window.addEventListener("error", (e: any) => {
const error = e?.error
safeWriteLog({