fix: screen fit

src/App.css

@@ -2,6 +2,7 @@
   text-align: center;
   display: flex;
   align-items: stretch;
+  overflow: hidden;
 }
 
 .App-logo {

src/App.js

@@ -217,7 +217,7 @@ class App extends React.Component {
     const { t } = this.props;
 
     return (
-      <div className="App">
+      <div className="App" style={{ height: isMobile ? window.innerHeight + 'px' : '100vh' }}>
         <Dialog open={loginOpen}>
           <DialogTitle>{t("login")}</DialogTitle>
           <DialogContent>

src/Components/deviceFrame/index.css

@@ -12,10 +12,12 @@
 
 .refreshButton {
   position: absolute;
-  right: 24px;
+  right: 12px;
   bottom: 24px;
   cursor: pointer;
   z-index: 1000;
+  width: 58px;
+  height: 61px;
 }
 
 .qrCode {

src/Components/deviceFrame/index.js

@@ -85,9 +85,21 @@ function DeviceFrame(props) {
 	var [cacheKey, setCacheKey] = useState(new Date().getTime());
 	var [openPopup, setOpenPopup] = useState(false);
 	var [absoluteUrl, setAbsoluteUrl] = useState("");
-	var [isMobile, setIsMobile] = useState(props.isMobile);
+	var [isMobile] = useState(props.isMobile);
+	var [safeAreaBottom, setSafeAreaBottom] = useState(0);
 	const { t } = useTranslation();
 
+
+	useEffect(() => {
+		let safeAreaBottom = 0;
+		if (window.visualViewport) {
+			safeAreaBottom = window.innerHeight - window.visualViewport.height;
+		} else {
+			safeAreaBottom = window.screen.height - window.innerHeight;
+		}
+		setSafeAreaBottom(safeAreaBottom);
+	}, [isMobile]);
+
 	useEffect(() => {
 		// 将宽度和高度的值转换为数字，并增加10%
 		const current = JSON.parse(JSON.stringify(configMap[props.device]))
@@ -135,8 +147,7 @@ function DeviceFrame(props) {
 
 	return (
 		<div className="deviceFrameContainer">
-
-			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" />
+			<img src={refreshButtonPng} alt="refresh" onClick={() => refresh()} className="refreshButton" style={{ bottom: isMobile ? safeAreaBottom + 40 + 'px' : '24px' }} />
 			{props.qrDataUrl && !isMobile && (
 				<div className="qrCode">
 					<img src={props.qrDataUrl} alt="qr code" />

src/Components/pane/index.css

@@ -1,12 +1,12 @@
 .Pane {
   width: 370px;
   background-color: #535353;
-  min-height: 100vh;
   padding: 24px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   position: relative;
+  overflow: hidden;
 }
 
 .selectPager {
@@ -20,13 +20,19 @@
   top: 0;
   bottom: 0;
   width: 60vw;
-  height: 100vh;
   background-color: #535353;
   z-index: 1000;
   overflow: hidden;
   transition: width 0.2s linear;
 }
 
+/* @TODO 横屏模式 */
+@media only screen and (orientation: landscape) {
+  .Pane.mobile {
+    width: 30vw;
+  }
+}
+
 .flod-menu-btn-warpper {
   position: fixed;
   right: 12px;

src/Components/pane/index.js

@@ -77,7 +77,7 @@ function Pane(props) {
 
 
 	return (
-		<div className={`Pane ${isMobile ? 'mobile' : ''} ${foldPanel ? 'fold' : ''}`} style={{ height: window.innerHeight }}>
+		<div className={`Pane ${isMobile ? 'mobile' : ''} ${foldPanel ? 'fold' : ''}`} style={{ height: window.innerHeight + 'px' }}>
 			{
 				isMobile &&
 				<div className="flod-menu-btn-warpper">