search

Cveinnt / LiveTerm

💻 Build terminal styled websites in minutes!
https://liveterm.vercel.app
MIT License
4.67k stars 504 forks source link

Mobile scaling #29

Open notangelmario opened 1 year ago

notangelmario commented 1 year ago

Opening a liveterm website on a mobile device results in bad scaling, weird scrolling and zooming.

tugibaasansuren commented 1 year ago

Ya, it looks like scrolling & zooming are still sketchy. I wonder what could be a fix...

bigsk1 commented 1 year ago

Ya, it looks like scrolling & zooming are still sketchy. I wonder what could be a fix...

I just forked it yesturday one of the first things I did was fix mobile view cause like 80% are on mobile now, changed below code.

app.tsx

<Head>
  <meta
    name="viewport"
    content="initial-scale=1.0, width=device-width, viewport-fit=cover"
    key="viewport"
    maximum-scale="1"
     />
      </Head>

global.css

@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: 'Hack';
  src: url(/assets/fonts/Hack-NF.ttf);
  display: swap;
}

* {
  font-family: 'Hack', monospace;
}

html,
body,
body > div:first-child,
div#__next,
div#__next > div {
  height: 100%;
  overflow: auto;
}

::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  min-width: 3px;
  min-height: 3px;
}

::-webkit-scrollbar-track {
  background: #1e252e;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  background: #ebdbb2;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #ff8037;
}

@media (max-width: 550px) {
  * {
    font-size: 0.945em;
  }
}

@media (max-width: 450px) {
  html,
  body,
  body > div:first-child,
  div#__next,
  div#__next > div {
    min-width: 425px;
  }
}