fix(移动端): 适配ios

This commit is contained in:
dataeaseShu 2024-02-27 10:16:14 +08:00
parent a1c1d10151
commit adfcc93487
3 changed files with 18 additions and 40 deletions

View File

@ -1,13 +1,17 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>DataEase</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/pages/mobile/main.ts"></script>
</body>
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, viewport-fit=cover" />
<title>DataEase</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/pages/mobile/main.ts"></script>
</body>
</html>

View File

@ -26,7 +26,7 @@ const hiddenTabbar = ref(false)
@hiddenTabbar="val => (hiddenTabbar = val)"
></Directory>
<Personal v-else-if="activeTabbar === 'user'"> </Personal>
<van-tabbar v-if="!hiddenTabbar" v-model="activeTabbar">
<van-tabbar safe-area-inset-bottom v-if="!hiddenTabbar" v-model="activeTabbar">
<van-tabbar-item name="home" icon="wap-home-o">首页</van-tabbar-item>
<van-tabbar-item name="direct" icon="bars">目录</van-tabbar-item>
<van-tabbar-item name="user" icon="user-o">我的</van-tabbar-item>
@ -40,20 +40,9 @@ const hiddenTabbar = ref(false)
</template>
<style lang="less">
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
@supports (-webkit-touch-callout: none) {
body {
min-height: -webkit-fill-available;
}
}
.mobile-index {
width: 100%;
height: 100%;
width: 100vw;
height: 100vh;
overflow: hidden;
}
</style>

View File

@ -101,24 +101,9 @@ const onSubmit = async () => {
</template>
<style lang="less">
body {
min-height: 100vh;
display: flex;
flex-direction: column;
}
@supports (-webkit-touch-callout: none) {
body {
min-height: -webkit-fill-available;
}
}
#app {
.de-mobile-login {
height: 100vh;
width: 100vw;
}
.de-mobile-login {
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;