🤖 修复安卓软件盘弹出问题

ncuhome · Sep 18, 2019 · 5f7d938 · 5f7d938
1 parent 3d0e213
commit 5f7d938
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 7 deletions.
diff --git a/public/index.html b/public/index.html
@@ -3,7 +3,7 @@
 <head>
   <meta charset="utf-8" />
   <link rel="shortcut icon" href="%PUBLIC_URL%/logo.png" />
-  <meta name="viewport" content="width=device-width, initial-scale=1, initial-scale=1.0, user-scalable=no" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
   <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@@ -27,8 +27,15 @@
   <title>Let's Pin</title>
   <style>
     * {
+      -webkit-touch-callout: none;
+      -webkit-user-select: auto;
+      -moz-user-select: none;
+      -ms-user-select: none;
       user-select: none;
     }
+    html, body {
+      background: #2a2a2a;
+    }
   </style>
 </head>
 <body>

diff --git a/src/pages/login/loginpage.jsx b/src/pages/login/loginpage.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, {useState} from 'react';
 import {
   BottomText,
   Content,
@@ -17,8 +17,9 @@ import {actionCreator} from './store'
 import {Redirect} from 'react-router-dom'
 
 function LoginPage({userId, password, message, status, onChangeUserId, onChangePassword, login}) {
+  const [height, setHeight] = useState(document.documentElement.clientHeight);
   return (
-    <LoginWrapper>
+    <LoginWrapper style={{height: `${height}px`}}>
       <MainPicture/>
       <SecondPicture/>
       <Content>

diff --git a/src/pages/login/style.js b/src/pages/login/style.js
@@ -28,7 +28,6 @@ export const LoginWrapper = styled.div`
   top: 0;
   left: 0;
   right: 0;
-  bottom: 0;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -67,7 +66,6 @@ const InputBox = styled.div`
   background: #464646;
   border-radius: 8px;
   border: 1px solid #4D4D4D;
-  position: relative;
   color: #D6D6D6;
   font-size: 18px;
   box-shadow: 0 2px 15px 0 rgba(0,0,0,.15);
@@ -90,14 +88,12 @@ export const UserIdInputBox = styled(InputBox)`
   animation: ${fadeIn} 1s ease;
   animation-delay: .5s;
   animation-fill-mode: backwards;
-  height: 47px;
 `;
 
 export const PwdInputBox = styled(InputBox)`
   animation: ${fadeIn} 1s ease;
   animation-delay: .7s;
   animation-fill-mode: backwards;
-  height: 47px;
 `;
 
 export const InputName = styled.div`