fix: 修复移动端下会被虚拟导航栏遮挡的问题

主要是100vh在移动端兼容性问题
TRPGEngine · Aug 14, 2021 · a992c9c · a992c9c
1 parent 2a31d43
commit a992c9c
Show file tree

Hide file tree

Showing 7 changed files with 30 additions and 24 deletions.
diff --git a/build/template/pre-loading.css b/build/template/pre-loading.css
@@ -15,8 +15,8 @@ html, body {
   overflow-y: auto;
   /* 不显示横向滚动条, 至少不在html, body层显示横向滚动条 */
   overflow-x: hidden;
-  height: auto !important;
-  min-height: 100vh !important;
+  height: 100% !important;
+  min-height: 100% !important;
 }
 
 body {
@@ -27,13 +27,9 @@ body {
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
-  min-width: 100vw;
-  min-height: 100vh;
 }
 
 #app {
-  min-width: 100vw;
-  min-height: 100vh;
   display: flex;
 }
 

diff --git a/src/portal/routes/rtc/MainScreen.tsx b/src/portal/routes/rtc/MainScreen.tsx
@@ -17,6 +17,7 @@ const Container = styled.div`
 const MainContent = styled.div`
   flex: 1;
   position: relative;
+  height: 100%;
 `;
 
 const MainPeerContainer = styled.div`

diff --git a/src/web/components/panels/CommonPanel.tsx b/src/web/components/panels/CommonPanel.tsx
@@ -16,7 +16,7 @@ const Root = styled.div`
   display: flex;
   flex-direction: column;
   height: 100%;
-  max-height: 100vh;
+  max-height: 100%;
   overflow: hidden;
 `;
 

diff --git a/src/web/routes/App.less b/src/web/routes/App.less
@@ -1,10 +1,11 @@
 * {
   box-sizing: border-box;
-  font-family: PingFang SC, "Microsoft YaHei", arial, serif;
+  font-family: PingFang SC, 'Microsoft YaHei', arial, serif;
   transition: opacity 0.1s ease-in-out;
 }
 
-html, body {
+html,
+body {
   margin: 0;
   padding: 0;
   min-height: 100%;
@@ -13,16 +14,21 @@ html, body {
   overflow: hidden;
 }
 
-
 .app {
-  ul, li, p {
+  ul,
+  li,
+  p {
     margin: 0;
     padding: 0;
     list-style: none;
   }
 
   a {
-    &,&:link,&:visited,&:hover,&:active {
+    &,
+    &:link,
+    &:visited,
+    &:hover,
+    &:active {
       text-decoration: none;
       color: #2596e5;
       font-size: 14px;
@@ -33,7 +39,7 @@ html, body {
     margin: 0;
     white-space: pre-wrap;
     word-wrap: break-word;
-    font-family: PingFang SC, "Microsoft YaHei", arial, serif;
+    font-family: PingFang SC, 'Microsoft YaHei', arial, serif;
   }
 
   img {
@@ -42,17 +48,19 @@ html, body {
   }
 }
 
-
 #app {
   .app {
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    top: 0;
+    overflow: hidden;
     display: flex;
     flex-direction: row;
     align-items: center;
     justify-content: center;
-    min-height: 100vh;
-    min-width: 100%;
-    height: 100vh;
-    background-color: rgba(255,255,255,0.2);
+    background-color: rgba(255, 255, 255, 0.2);
     transition: initial;
   }
 }
diff --git a/src/web/routes/Main/Content/Group/GroupPanel/GroupChatPanel.tsx b/src/web/routes/Main/Content/Group/GroupPanel/GroupChatPanel.tsx
@@ -9,15 +9,14 @@ import { GroupMembersAction } from '@web/components/panels/actions/GroupMembersA
 const Root = styled.div`
   display: flex;
   flex-direction: row;
-  flex: 1;
+  height: 100%;
 `;
 
 interface GroupChatPanelProps {
   groupUUID: string;
 }
 export const GroupChatPanel: React.FC<GroupChatPanelProps> = TMemo((props) => {
   const { groupUUID } = props;
-  const [showMembers, setShowMembers] = useState(false);
   const groupInfo = useJoinedGroupInfo(groupUUID);
 
   if (_isNil(groupInfo)) {

diff --git a/src/web/routes/Main/Content/Personal/UserConversePanel.tsx b/src/web/routes/Main/Content/Personal/UserConversePanel.tsx
@@ -6,8 +6,8 @@ import styled from 'styled-components';
 
 const Root = styled.div`
   display: flex;
-  flex: 1;
   flex-direction: column;
+  height: 100%;
 `;
 
 interface UserConversePanelParams {

diff --git a/src/web/routes/Main/index.tsx b/src/web/routes/Main/index.tsx
@@ -8,9 +8,11 @@ import { SidebarContextProvider } from './SidebarContext';
 const Root = styled.div.attrs({
   'data-testid': 'main-page-root',
 })`
-  width: 100vw;
-  height: 100vh;
-  position: relative;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 `;
 
 const BaseContent = styled.div`