diff --git a/src/App.tsx b/src/App.tsx index 076ef89..6d3ba9c 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -4,33 +4,27 @@ import { ContextWindowHeight } from './components/contextWindowHeight'; import { MainScreen } from './components/mainScreen/mainScreen'; function App() { - const [windowHeight, setWindowHeight] = useState(window.screen.availHeight); + // const [windowHeight, setWindowHeight] = useState(window.screen.availHeight); + const [windowHeight, setWindowHeight] = useState(window.visualViewport.height); - window.addEventListener('resize', e => { + // window.addEventListener('resize', e => { + // //@ts-ignore + // setWindowHeight(e.currentTarget.screen.availHeight) + // }) + + window.visualViewport.addEventListener('resize', (e) => { //@ts-ignore - setWindowHeight(e.currentTarget.screen.availHeight) + setWindowHeight(e.currentTarget.height, windowHeight) }) - window.onload = function () { - hideAddressBar(); - window.addEventListener("orientationchange", function () { - hideAddressBar(); - }, false); - } - - function hideAddressBar() { - setTimeout(function () { - document.body.style.height = window.outerHeight + 'px'; - setTimeout(function () { - window.scrollTo(0, 1); - }, 1100); - }, 1000); - return false; - } + useEffect(() => { + // alert(navigator.userAgent.includes('iPhone')) + // alert(window.visualViewport.height + '\n' + windowHeight) + }, []) + - return (
diff --git a/src/components/mainScreen/mainScreen.tsx b/src/components/mainScreen/mainScreen.tsx index 7eb9647..0ff23c1 100644 --- a/src/components/mainScreen/mainScreen.tsx +++ b/src/components/mainScreen/mainScreen.tsx @@ -36,7 +36,7 @@ export const MainScreen:React.FC = React.memo(() => { /> { - windowHeight < 700 ? + windowHeight < 700 || navigator.userAgent.includes('iPhone') ?