DmitriyB
47 lines
1.5 KiB
TypeScript
47 lines
1.5 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import './App.css';
|
|
import { ContextWindowHeight } from './components/contextWindowHeight';
|
|
import { MainScreen } from './components/mainScreen/mainScreen';
|
|
|
|
function App() {
|
|
// const [windowHeight, setWindowHeight] = useState<number>(window.screen.availHeight); - не робит на iphone
|
|
const [windowHeight, setWindowHeight] = useState<number>(window.visualViewport.height);
|
|
const [currentOrientaton, setCurrentOrientaton] = useState<number>(window.orientation);
|
|
|
|
|
|
window.visualViewport.onresize = (e) => {
|
|
//@ts-ignore
|
|
setWindowHeight(e.currentTarget.height);
|
|
}
|
|
|
|
// !!! работает на свойстве помеченном как deprecate - на айфоне иначе хз как
|
|
window.onorientationchange = e => {
|
|
//@ts-ignore
|
|
let angle = e.target.orientation;
|
|
if(currentOrientaton !== angle) {
|
|
setCurrentOrientaton(angle);
|
|
}
|
|
}
|
|
|
|
useEffect(() => {
|
|
if(!navigator.userAgent.includes('iPhone')) {
|
|
return;
|
|
}
|
|
if(currentOrientaton === 90) {
|
|
document.querySelector('body').style['paddingLeft'] = 'env(safe-area-inset-left)'
|
|
} else if(currentOrientaton === -90) {
|
|
document.querySelector('body').style['paddingLeft'] = '0'
|
|
}
|
|
}, [currentOrientaton]);
|
|
|
|
return (
|
|
<div className="App">
|
|
<ContextWindowHeight.Provider value={windowHeight}>
|
|
<MainScreen />
|
|
</ContextWindowHeight.Provider>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|