630 pixels

Frank K Hosaka · 7 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.

*** Escrevi besteira: uma coisa é medir a resolução do micro pelo localhost, e outra bem diferente é medir através da Hostinger ***

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 2 horas atrás por Frank K Hosaka

Frank K Hosaka · 2 horas atrás

Tentei importar a solução PHP no Livewire, mas não deu certo com o Tablet. Mas deu certo com o micro, mas a resolução do micro mudou depois que fiz a atualização do Windows hoje de manhã. Ontem, a minha resolução do notebook era 1360x599, hoje ele está com 1511x665.

Em teoria, o código JavaScript não deveria funcionar no Livewire, porque ele é um JavaScript (Ajax) camuflado com a linguagem PHP. É por isso que continuo usando o PHP, eu não confio no Livewire, apesar dele ser muito bacana.

arquivo resources > views > components > layouts > app.blade.php
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="shortcut icon" href="{{ asset('favicon.ico?v=2') }}">
  @vite(['resources/css/app.css', 'resources/js/app.js'])
  <title>{{ $titulo ?? 'Menu' }}</title>
</head>
<script>
    window.addEventListener('DOMContentLoaded', () => {
      const width = window.innerWidth;
      const height = window.innerHeight;
      // alert(width+" "+height)
      // Galaxy Tab S10 Lite // não funciona no Livewire
      if (width == 880 && height == 1252) {
        document.body.classList.add('w-[800px]')
      }
      // Galaxy Book 4
      if (width == 1511 && height == 665) {
        document.body.classList.add('text-sm')
      }
    });
</script>
<body class="w-[630px] m-0 m-auto text-lg">
  <header class="bg-white shadow-sm flex items-center justify-between font-normal">

    <flux:heading class="px-2 font-normal">Livewire</flux:heading>

    <div class="relative group z-10">
      <flux:button icon:trailing="chevron-down" variant="ghost" class="text-gray-500">
        {{ $titulo ?? 'Menu' }}
      </flux:button>
      <div class="hidden group-hover:block absolute bg-white 
        text-gray-800 rounded-md shadow-lg w-45 ">
        @if(auth()->user()->id == 1)
          <div class="flex space-x-4 px-4 py-2">
            <a href="/previsao" wire:navigate class="text-gray-500 transition-colors">
              Previsão
            </a>
            <a href="/diario" wire:navigate 
                class="px-3  text-gray-500 transition-colors">
              Diário
            </a>
          </div>
          <a class="block px-4 py-2 text-gray-500" href=/outros wire:navigate>Outros</a>
        @endif
        <a class="block px-4 py-2 text-gray-500" href='/orcamento/0/1' wire:navigate>Orçamento</a>
        <a class="block px-4 py-2 text-gray-500" href=/pagar wire:navigate>Pagar</a>
        <a class="block px-4 py-2 text-gray-500" href=/receber wire:navigate>Receber</a>
        <a class="block px-4 py-2 text-gray-500" href=/pessoa wire:navigate>Pessoa</a>
        <a class="block px-4 py-2 text-gray-500" href=/produto/1 wire:navigate>Produto</a>
        <a class="block px-4 py-2 text-gray-500" href=/venda wire:navitate>Relatório de Venda</a>   
      </div>
    </div>

    <div class="relative group">
      <flux:button icon:trailing="chevron-down" variant="ghost" class="text-gray-500">
        {{ auth()->user()->nome}}
      </flux:button>
      <div class="hidden group-hover:block absolute bg-white 
        text-gray-500 rounded-md shadow-lg w-40">
        <flux:button href="/logout" variant="ghost" class="text-gray-500">Sair</flux:button>
        <flux:button href=# variant="ghost" class="text-gray-500">Mudar Senha</flux:button>
      </div>
    </div>
  </header>
  @livewireScripts
  {{ $slot }}
  </script>
</body>
</html>

Entrar

630 pixels

Pergunta

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

Frank K Hosaka

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades