630 pixels

Frank K Hosaka · 4 horas atrás

O meu projeto Orçamento foi feito para o tablet Galaxy S5e do meu irmão. Na base da tentativa e erro, eu descobri que ele tem 630 pixels, e assim desenhei todo o projeto baseado nesse número.

Mas nessa semana eu comprei um tablet Galaxy S10 Lite, o meu projeto coube nele, mas sobrou um monte de espaço pelos lados. Com a ajuda do window.innerWidth e o window.innerHeight do JavaScript descobri que o S10 Lite tem 880 x 1252 de resolução. Na base da improvisação, eu pedi para o projeto usar um <body> de 800 pixels, quando ele for trabalhar dentro do S10 Lite, e assim eu tive muita sorte, todo o meu projeto de 630 pixels foram espalhados no espaço de 800 pixels.

Claro que existe muita tecnologia como o CSS responsivo. O problema é que eu nem sei mexer com o CSS básico, ainda.

arquivo appView.php
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, 
    maximum-scale=1.0, user-scalable=no">
<script src="https://cdn.tailwindcss.com"></script>
<link rel="icon" type="image/svg+xml" sizes="any" href="https://www.php.net/favicon.svg?v=2">
<style>
    summary { list-style:none }
</style>
<script>
    window.addEventListener('DOMContentLoaded', () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      // alert(width+" "+height)
      // Galaxy Tab S10 Lite
      if (width == 880 && height == 1252) {
        document.body.classList.add('w-[800px]')
      }
      // Galaxy Book 4
      if (width == 1360 && height == 599) {
        document.body.classList.add('text-sm')
      }
    });
  </script>
<title>Projeto Classe</title>
<body class="w-[630px] m-0 m-auto text-lg">

Editado 4 horas atrás por Frank K Hosaka

Entrar

630 pixels

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

0 respostass a esta questão

Posts Recomendados

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades