1

I am working on designing Web Application which wants only 100% of screen means not to scroll, that's why am using 100vh . In which having some input fields, its working fine on the desktop but when i am clicking on input field on Mobiles and Tablets there keyboard is opening by which layout is getting effected Click how its working. Anyone can help me that how can i handle this situation using CSS or JS, So that the layout is also correct and can be typed on the keyboard as well.. Thanks in advance.

Here is a link click here to know what is happening.

The way I tried is that when the input field is active then the screen size which is being compressing will add 250px height for particular devices.

const documentHeight = () => {
         const doc = document.documentElement;
         const platforms = ["Android", "Linux", "arm"];
         const isAndroid = new RegExp(platforms.join("|")).test(
            window.navigator.userAgent
         );

         if (!isAndroid)
            document.addEventListener("touchmove", function (event) {
               event.preventDefault();
            });

         if (window.innerHeight < 667 && isAndroid) height = 250;
         else height = 0;

         doc.style.setProperty(
            "--doc-height",
            `${window.innerHeight + height}px`
         );
      };

      window.addEventListener("resize", documentHeight);
      let htmlTag = document.getElementsByTagName("html");
      let root = document.getElementById("root");
    {
         if (width <= 768) {
            documentHeight();
            htmlTag[0].style.position = "fixed";
            htmlTag[0].style.overflow = "hidden";
            htmlTag[0].style.width = "100vw";
         }
      } else {
         const doc = document.documentElement;
         doc.style.removeProperty("--doc-height");
      }
   });
Vedant Gupta
  • 11
  • 2

1 Answers1

0

Your Layout also completely overlapping, if opening this site on mobile in landscape mode. You are trying to fit a lot of Informations to a small space.

In my opinion, there are two possibilities.

First would be to pass your wish, to accomplish fit everything at 100vh. Nearly all pages are not only 100vh. And your page won't look worse if you do this.

Second would be to hide the about, main and footer content on mobile, and if you click on each of them, they will flip up the content.

#EDIT: Probably your wish:

first checking for media querys (the best option, because user agent detection is not good for modern websited) You could also watch here and add other things to detect a mobile.

then adding an eventlitener to the inputs, if they are active => add some space.

const media = window.matchMedia("(max-width: 600px)");
if (media.matches) {
  const container_fluid = document.querySelector(".container-fluid");
  const inputs = document.querySelectorAll("input");

  inputs.forEach((input) => {
    input.addEventListener("focus", () => {
      container_fluid.setAttribute(
        "style",
        "height:" + (window.innerHeight + 100) + "px;"
      );
    });
    input.addEventListener("blur", () => {
      container_fluid.setAttribute("style", "height: 100vh;");
    });
  });
}

Hope i could help.

TrueStoryShort
  • 66
  • 4