Ajuste de resolução. Como alterar a resolução da tela do monitor? Selecionando a resolução ideal. Que resolução devo definir?

26.10.2019

Como fazer um layout de site responsivo

Primeiramente, se você pretende criar um design de site responsivo, entre as tags cole o seguinte código:

Que idiota eu fui por não ter feito isso imediatamente quando estava tentando fazer um layout de site adaptável!!!
O problema com os navegadores móveis é o dimensionamento do layout do site, mesmo os adaptativos.

Imagine, eu desenho um desenho e depois anoto tudo estilos necessários e solicitações, verifico a adaptabilidade do site em diferentes resoluções. Tudo parece estar bem! Mas quando abro meu blog no smartphone, vejo que o site simplesmente encolheu. Não se adaptou ao dispositivo móvel, simplesmente reduziu o tamanho da fonte, das imagens, etc.

Como assim? Comecei a verificar todos os estilos para ver se havia escrito as classes corretamente e, finalmente, cheguei ao ponto em que verifiquei a largura da janela do navegador em px usando javascript. Fiquei chocado. Ao verificar em um laptop, obtive um resultado de 1024px, e obtive quase o mesmo resultado ao abrir o site em um smartphone!

Mas isso não pode ser!

Acontece que, se você não escrever o código que indiquei acima, o navegador do celular não entende que o site é responsivo e está simplesmente tentando diminuir a página do site para que caiba na pequena tela de um telefone celular.

Por causa da minha estupidez e incompetência, perdi muito tempo. Mas agora me lembro disso para sempre))).

Consultas de mídia CSS de layout adaptável

Para torná-lo responsivo usando CSS, você precisa usar consultas de mídia.

Como é isso? Sim, muito simples. No arquivo CSS você precisa escrever consultas como:

@tela de mídia e (largura mínima: 1440px) e (largura máxima: 1599px)( )

Este código significa que os estilos entre “( )” funcionarão para telas com largura mínima de 1440px e máxima de 1599px.

Ou seja, aqueles estilos de elementos do site que devem ser adaptados dependendo da resolução da tela devem ser escritos separadamente para cada largura de tela possível.

As resoluções de tela mais importantes para layout adaptativo

320px- Dispositivos móveis (orientação retrato);
480px- Dispositivos móveis (orientação paisagem);
600 pixels- Comprimidos pequenos;
768px- Tablets (orientação retrato);
1024px- Tablets (orientação paisagem)/Netbooks;
1280 pixels ou mais- PC.

São essas permissões que precisam ser enfatizadas e concedidas Atenção especial com layout adaptativo. Esses são os tipos mais comuns de resoluções de tela.

design responsivo de bootstrap

É muito conveniente usar o bootstrap para criar um layout adaptativo. A comodidade é que todos os estilos para adaptação de blocos, botões, tabelas, etc. já estão cadastrados no bootstpap. Você só precisa descobrir qual classe atribuir a qual elemento.

Para começar, baixe a versão mais recente do bootstrap e conecte-a ao seu site. Observe que conectar estilos e scripts ao WordPress tem características próprias.

O layout no bootstrap difere porque a largura do bloco ou tela é dividida por 12 partes iguais. E ao atribuir uma determinada classe a um bloco, você pode definir a largura do bloco igual ao número necessário de peças.

Por exemplo, este design permitirá que você aloque um bloco largo para conteúdo com 8 partes de largura e um bloco estreito para uma barra lateral com 4 partes de largura:

A largura dos blocos será calculada automaticamente dependendo da largura da tela. E quando visualizados em um dispositivo móvel, esses blocos se deslocarão uns sob os outros.

Você também pode ajustar a distância do bloco até a borda, novamente quantidade requerida peças. Por exemplo este desenho:

Um bloco de 10 partes de largura será criado com recuo à esquerda de 1 parte da tela.

Se você olhar bem, trabalhar com bootstrap torna o trabalho muito rápido. Além disso, esses estilos definitivamente funcionam corretamente e não haverá nada torto no site.

No futuro pretendo postar diversas lições sobre como trabalhar com bootsrap. Portanto, aconselho você a não perder esse momento.

Verificando a adaptabilidade do site

Mas surge a pergunta: como verificar a adaptabilidade do site? Agora você escreveu consultas de mídia em CSS, conectou o bootstrap e usou as classes necessárias. Como você pode verificar se o site se adapta corretamente em todas as resoluções de tela?

Muito preciso e o mais importante serviço gratuito, que merece respeito e gratidão de webmasters e designers de layout que lidam com layout adaptativo de sites.

Bem, você gostou do artigo? Tudo limpo? Se não, escreva nos comentários, vamos descobrir juntos.

Sim, para criar um design de site responsivo, você precisa trabalhar muito. Mas esses esforços serão recompensados com uma atitude favorável em relação ao seu site por parte dos mecanismos de pesquisa e, o mais importante, dos visitantes do seu site.

Presente para todos. Hoje falaremos sobre algo que não está claro, ou seja, o que é AMD GPU Scaling. O nome sugere escala, mas o que exatamente? GPU é provavelmente GP, o que significa processador gráfico. Resumindo, não vou adivinhar, entrei na Internet e procurei informações lá. Pessoal, as primeiras informações já estão aí. Parece que isso está ajustando a resolução dos jogos à resolução da Mônica. Resumindo, parece algo útil, mas é preciso verificar na prática para que a imagem não fique borrada e seja confortável para a percepção. Ou seja, você precisa ativar o GPU Scaling, depois desativá-lo, comparar, enfim, experimentar como...

Eu realmente não consigo entender o que é GPU Scaling. Mas eu entendi com certeza que se o Monik não for bem padronizado ou mesmo o jogo for algum tipo de obscuro, então pode ter listras pretas nas laterais, sabe? Bem, o GPU Scaling parece ser capaz de consertar isso, mas como? Mas aqui não sei, pode esticar o quadro, mas se está bem feito ou não, isso precisa ser verificado...

Pessoal, só entendi uma coisa: o GPU Scaling pode ajudar quando há algum problema de resolução. Por exemplo, no jogo as listras são pretas nas laterais. Não consegui encontrar uma definição específica para isso na Internet, desculpe.

Então pessoal, ainda estou em busca de mais informações, pois preciso descobrir um pouco sobre o que é. Então, uma pessoa escreveu que se você habilitar o GPU Scaling, a imagem ficará melhor do que se você habilitar o Scaling to Display. Outra pessoa escreve que não há problemas de alongamento; muitos monitores têm opção de exibição: tela inteira ou em formato. E então as pessoas também escrevem que onde não existe essa opção, você pode ativar o GPU Scaling. Ou seja, novamente, o dimensionamento da GPU é algo como ajustar o jogo ao monique para que o jogo preencha todo o monique e para que não haja barras pretas nas laterais. Eu entendi tudo exatamente assim, mas talvez eu esteja errado...

Uma pessoa no fórum Steam escreveu que costumava jogar com uma placa de vídeo NVIDIA e conseguia esticar a resolução, mas agora ele tem uma placa de vídeo AMD e não consegue esticar a resolução. E aqui está a resposta de uma pessoa: que ele habilitaria o GPU Scaling. Então, mais uma vez, concluímos que o dimensionamento da GPU serve para aumentar a resolução.

Encontrei uma imagem, sei que é um pouco difícil de ver aqui, desculpe por isso, mas parece que esta configuração específica é exibida aqui: escala de GPU, veja:

Pessoal, não sei mais o que dizer. Uma coisa que entendi é que GPU Scaling é uma opção para ajustar a resolução quando o jogo tem barras pretas nas laterais. Habilitar ou não a opção, tudo depende do seu jogabilidade, se não houver bandas, você não precisa ligá-las, mas se houver, você pode tentar, talvez melhore. Só isso, boa sorte pessoal e vibrações positivas!

Nas configurações resolução da tela A clareza do texto e das imagens depende. Normalmente, quanto maior a diagonal do monitor, maior será a resolução de tela (DPI) que ele suporta. No entanto, a capacidade de aumentar a resolução da tela também é afetada pelo adaptador de vídeo (placa de vídeo).

Como dito acima, mais altas resoluções de tela os detalhes parecem mais nítidos. Isto é especialmente perceptível em monitores LCD. computadores desktop e laptops. Nesses monitores, a imagem mais nítida é obtida ao definir o chamado ter ou resolução de tela "nativa". Neste caso, um pixel (ponto) na tela corresponde a um pixel físico no monitor.

Com monitores CRT a imagem é um pouco diferente. Lá a resolução da tela é menor (geralmente 1024 x 768 pixels) e a configuração de uma resolução de tela “não nativa” não é tão perceptível devido às peculiaridades da tecnologia de saída de imagem.

Referência: A resolução de tela “nativa” é sempre indicada na documentação do seu monitor. Quase tudo monitores modernos exibe uma mensagem na tela indicando configurações ideais (“nativas”) caso o sistema esteja configurado para emitir em um modo diferente. Além disso, às vezes a resolução nativa é indicada nas configurações disponíveis no menu OSD do monitor.

Como é a configuração real da imagem?

Começando com Janelas 7, o sistema, imediatamente após a conclusão da instalação, tenta configurar o mais parâmetros ideais tela(resolução da tela, taxa de atualização e profundidade de cor). Esses parâmetros podem variar muito, como em Vários tipos monitores (monitor LCD ou monitor CRT) e modelos diferentes mesmo de um fabricante de tela.

Instale alguns drivers adicionais para placas de vídeo e principalmente monitores nos primeiros estágios (imediatamente após a instalação sistema operacional) não há necessidade. Mas isso nem sempre acontece, infelizmente.

Há momentos em que configuração automática falhas. O sistema operacional funciona com uma resolução de tela de 1024 x 768 (e às vezes 800 x 600) pixels. Neste caso, você pode tentar definir todas as configurações manualmente.

Ajustando manualmente a resolução da tela

Para alterar as configurações exibindo uma imagem na tela você precisa fazer o seguinte:

Aperte o botão " Começar", selecione " Painel de controle»;
Entre na seção " Design e personalização" e selecione o comando " Configurando a resolução da tela»;
Na primeira lista suspensa ao lado das palavras “ Tela“Devem ser indicados o nome e modelo do seu monitor. Se disser " Monitor PnP Universal" ou " Monitor universal não PnP", tente selecionar seu monitor na lista suspensa. Se o seu monitor não estiver na lista, as etapas adicionais serão indicadas abaixo no artigo;
Um pouco mais abaixo na janela oposta à inscrição “ Permissão» Clique na lista suspensa e use o controle deslizante para definir a resolução de tela desejada. Se não houver resolução de tela “nativa”, provavelmente seu monitor foi identificado incorretamente (veja o ponto 3 acima) ou há problemas com a configuração do adaptador de vídeo (por exemplo, os drivers não foram instalados ou foram instalados incorretamente);
Após alterar a resolução da tela usando o controle deslizante, você precisa clicar no botão " Aplicar»;
Depois de tudo, você precisa clicar no botão “ Salvar" para confirmar a nova resolução de tela selecionada ou o botão " cancelar alterações" para retornar às configurações anteriores.

Referência: Se você selecionar uma resolução de tela que não seja suportada pelo seu monitor, a tela poderá ficar em branco. Neste caso, é necessário aguardar alguns segundos, após os quais a resolução original da tela será restaurada.

Ajustar manualmente o monitor não ajudou. O que fazer?

Geralmente você precisa instalar drivers para placas de vídeo do fabricante. Eles podem ser encontrados no disco, se você tiver um quando comprou a placa de vídeo, ou baixados da Internet. É melhor dar preferência ao site do fabricante do seu adaptador de vídeo. De outros sites é muito fácil baixar algum programa malicioso em vez de um driver.

Instale o driver e reinicie. Nada mudou? Em seguida, tentamos repetir todos os 6 pontos descritos acima.

Os drivers da placa de vídeo estão instalados, mas a imagem não está nítida

Se depois de todas as manipulações nada ajudar, então provavelmente você tem no parâmetro “ Tela"indicado" Monitor universal (não) PnP" O sistema operacional simplesmente não sabe qual resolução seu monitor suporta.

Nesse caso, alguns fóruns e sites de informática recomendam tentar instalar um driver para o monitor. Talvez isso tenha ajudado alguém. Porém, na maioria das vezes, esses drivers simplesmente não existem. Especialmente diz respeito Janelas 7 ou mais recente Janelas 8 ou Janelas 10- drivers de monitor simplesmente não são necessários para esses sistemas operacionais (especialmente para modelos de monitores mais antigos).

Uma solução simples e rápida para o problema de personalização de tela

O problema quase sempre é resolvido de maneira muito simples. Ver:

Provavelmente sua placa de vídeo possui duas saídas DVI. Tente conectar o cabo a um conector diferente;
Se o monitor estiver conectado por meio de um adaptador DVI-VGA e a etapa 1 não ajudar, tente outro adaptador. Acontece que você encontra adaptadores “inadequados”;
Se as etapas 1 e 2 não ajudarem, verifique ou substitua o cabo;
Se possível, você precisa se livrar completamente do adaptador DVI-VGA. Conecte imediatamente via interface DVI ou HDMI, se disponível na placa de vídeo e monitor;
Existem até recomendações online para inverter o cabo (inserir o conector do monitor na placa de vídeo e vice-versa). Isso não me ajudou, mas ainda pode;
Pelo contrário, conecte através de um adaptador DVI-VGA. Eu tive caso real, quando a placa de vídeo tinha 2 saídas - VGA e DVI. EM Janelas 10 O monitor foi detectado somente após conectá-lo por meio de um adaptador. Nada mais ajudou.

Depois de concluir cada uma dessas seis etapas, você precisa reiniciar e repetir novamente configuração manual permissão se isso não acontecer automaticamente.

Em 8 de 10 casos, basta imediatamente após a instalação do SO não perder tempo mexendo nos drivers, mas ter certeza de que a questão toda é que o SO não conseguiu detectar automaticamente o modelo do monitor (instalado “ Monitor PnP Universal"ou mesmo" Monitor universal não PnP") e conclua as últimas 4 etapas.

Percebi que os desenvolvedores têm muitas dúvidas sobre como adaptar o aplicativo para diferentes tamanhos de tela. Para poder fornecer um link que contenha as informações necessárias, decidi escrever este material pequeno. Considerarei não apenas os aplicativos para Windows 8.1; o desenvolvimento de aplicativos UWP do Windows 10 também será abordado.

Não é novidade para ninguém que existem muitos dispositivos com vários tamanhos e resoluções de tela. Para um dispositivo com tela pequena, mas alta resolução Você precisa de uma imagem de tamanho e qualidade diferentes dos dispositivos com tela maior e mesma resolução. Isso se deve ao fato de que a quantidade de pixels físicos do dispositivo nem sempre coincide com a quantidade de pixels reais exibidos pelo sistema/aplicativo.

O fator de escala é a proporção entre os pixels reais do dispositivo e os exibidos. No cálculo desse coeficiente também é levada em consideração a distância padrão a partir da qual os usuários olham para a tela do dispositivo.
Os aplicativos do Windows 8.1 suportam três taxas de escala: 100%, 140% e 180%. você telefone do Windows 8.1 aplicações vários coeficientes escalando mais.
No emulador de aplicativo da Windows Store, ao alterar a resolução da tela, você pode ver a resolução em si e o valor do fator de escala próximo a ela.

O processo de adaptação de imagens é semelhante ao de localização de imagens. Para obter a versão correta da imagem para diferentes resoluções, você precisa criar 3 pastas dentro da pasta de imagens com os nomes: escala-100, escala-140, escala-180. Dentro dessas pastas adicionamos imagens com os mesmos nomes.

Se você for armazenar todos os arquivos em uma pasta, precisará adicionar um postfix aos arquivos de imagem indicando o fator de escala.

Conseqüentemente, você precisará criar 3 versões da imagem. Se a sua imagem padrão tiver 200 pixels de largura, para dimensionar 140% você precisará multiplicar a largura por 1,4. Ou seja, você precisará criar a mesma imagem com 280 pixels de largura. Bem, para escalar 180% você precisará ter a mesma imagem com largura de 200 * 1,8 = 360 pixels.
Enquanto o aplicativo está em execução, a imagem ideal é selecionada automaticamente, dependendo da resolução da tela do usuário.
Se você especificar um arquivo de imagem a partir do código, o seguinte snippet oficial poderá ajudá-lo a exibir uma imagem com a resolução correta, que, com base no valor de DisplayInformation.GetForCurrentView().ResolutionScale, determina o fator de escala de tela atual:
// precisa adicionar o namespace Windows.Graphics.Display; ResoluçãoScale resoluçãoScale = DisplayInformation.GetForCurrentView().ResolutionScale; Uri uri = nulo; switch (resolutionScale) ( case ResoluçãoScale.Scale100Percent: uri = new Uri("ms-appx:///images/scale-100/girl.jpg"); break; case ResoluçãoScale.Scale140Percent: uri = new Uri("ms- appx:///images/scale-140/girl.png"); break; case ResoluçãoScale.Scale180Percent: uri = new Uri("ms-appx:///images/scale-180/girl.png"); break ;) imagem.Fonte = new BitmapImage(uri);
Usando esses recursos de dimensionamento de imagem, você pode criar aplicativos com layouts de pixels flexíveis e não fixos, por exemplo, usando Grid e especificando valores proporcionais como tamanhos de células - *.

Adaptando o layout do aplicativo ao tamanho da tela
Se o conteúdo do seu aplicativo estiver contido em um elemento de contêiner Viewbox, quando o tamanho da tela mudar, seu conteúdo será automaticamente ampliado e dimensionado para preencher todo o espaço disponível. A fim de imagens rasterizadas parecia decente com essa ampliação, é necessário adicionar várias opções de tamanhos diferentes, como acabamos de ver.
Colocar uma aplicação dentro de um Viewbox é uma das opções propostas para adaptar a aplicação a diferentes telas. Outra opção seria ocultar os elementos do aplicativo ou redimensioná-los. Vejamos como trabalhar com diferentes tamanhos de aplicativos usando o modo snap como exemplo.
Por padrão, um aplicativo do Windows 8.1 pode ter pelo menos 500 pixels de largura. Se o seu aplicativo ficar bem mesmo em uma visualização mais estreita, ou se puder ser usado com outros aplicativos, e também se for desejável deixá-lo na posição de trabalho pelo maior tempo possível, você pode definir sua largura mínima para 320 pixels. Isso pode ser feito especificando uma largura mínima de 320 no editor de manifesto ou adicionando o atributo MinWidth com o valor width320 ao código do manifesto (a propósito, em aplicativos do Windows 8 o modo snap era exatamente 320 pixels)

A maioria opção simples Para adaptar a aplicação a diferentes larguras, pode ser imperativo definir visibilidade/invisibilidade, bem como a largura e altura dos controles no evento de redimensionamento da tela. Você pode fazer algo assim:
public MainPage() ( this.InitializeComponent(); this.SizeChanged += MainPage_SizeChanged; ) /// evento de mudança de tamanho do aplicativo void MainPage_SizeChanged(object sender, SizeChangedEventArgs e) ( if (e.NewSize.Width< 500) { grdMain.Width = 475; txtField1.Visibility = Visibility.Collapsed; } else { grdMain.Width = 1000; txtField1.Visibility = Visibility.Visible; } } /// ...
Mas isso pode ser feito em aplicações pequenas nas quais não será difícil passar por todos os controles existentes no código C#. Para aplicações normais, as alterações são melhores aparência armazenar em estados XAML VisualState. Dessa forma, você pode dar ao designer a capacidade de alterar confortavelmente o layout no Blend. O exemplo a seguir contém as mesmas alterações do código anterior:
gferg
Agora no evento de redimensionamento da janela podemos passar para o estado desejado (dependendo do tamanho atual da tela):
void MainPage_SizeChanged (remetente do objeto, SizeChangedEventArgs e) ( if (e.NewSize.Width< 500) { VisualStateManager.GoToState(this, "MinimalLayout", true); } else { VisualStateManager.GoToState(this, "DefaultLayout", true); } } // если необходимо определить является ли текущая ориентация устройства книжной или альбомной, то можно использовать сравнение // if (e.NewSize.Width < e.NewSize.Height)
Aqui, para obter o tamanho da tela em largura e altura, usamos novamente o parâmetro SizeChangedEventArgs e.
Em qualquer outro momento da execução do programa, a largura e a altura da janela visível do aplicativo (os chamados pixels efetivos, que não dependem do tamanho da tela do dispositivo) podem ser obtidas da seguinte forma:
double windowWidth = Window.Current.Bounds.Width; double windowHeight = Window.Current.Bounds.Height; Além dos pixels efetivos, também existem pixels brutos (inglês raw - raw, unprocessed) - o número real de pixels na tela ou pixels físicos. Por exemplo, se a tela do dispositivo tiver 1.080 pixels de largura, o número de pixels brutos será 1.080 horizontalmente.

Para obter o tamanho físico da janela do aplicativo em polegadas (se por algum motivo você precisar repentinamente dessa informação), você pode usar o seguinte truque:
largura dupla = Window.Current.Bounds.Width * (int)DisplayInformation.GetForCurrentView().ResolutionScale / 100; altura dupla = Window.Current.Bounds.Height * (int)DisplayInformation.GetForCurrentView().ResolutionScale / 100; dpi duplo = DisplayInformation.GetForCurrentView().RawDpiY; // caso o monitor não retorne dados ou você tenha configurado clonagem ou duplicação de telas em múltiplos monitores, você retornará o valor 0 como DPI double screenDiagonal = Math.Sqrt(Math.Pow(width / dpi, 2) + Math .Pow (altura/dpi, 2));

E quanto aos aplicativos da Plataforma Universal do Windows?

Os Aplicativos Universais do Windows 8.1 já nos deram a oportunidade de criar nosso próprio layout XAML separado para WP e Store. A captura de tela a seguir mostra dois arquivos MainPage.xaml:

Nas aplicações UWP teremos a oportunidade de criar diversos arquivos XAML com representações da aparência da aplicação e selecionar o desejado, dependendo do vários fatores(tamanho da tela, resolução, etc.). Vamos tentar.
Vamos criar um diretório no projeto DispositivoFamília-Móvel.
Clique com o botão direito nele e selecione Adicionar novo item
Nas opções, precisamos selecionar Visualização XAML e nomear nossa visualização com o mesmo nome da visualização que queremos substituir. Em um caso simples, poderia ser MainPage.xaml.
Agora o código XAML que adicionamos ao arquivo MainPage.xaml localizado na pasta DeviceFamily-Mobile será exibido em dispositivos móveis. Em desktops e outros dispositivos, o design do aplicativo da MainPage principal será exibido.

Painel Relativo
Agora temos acesso a um novo controle RelativePanel, que nos permite criar relacionamentos de posição entre seus elementos filhos.
Por exemplo, o seguinte código:

Qualidade grafica
	Baixo	Média	Alto	Ultra	Máx.
Grão	Sobre
Aberrações cromáticas	Sobre
Modo de ajuste de resolução	Auto 720p	Automático 900p	1080p automático	Desligado	Desligado
Qualidade da textura	Baixo	Média	Alto	Ultra	Ultra
Suavização	Desligado	FXAA	Suavização temporal	Suavização temporal	Suavização temporal
Sombreamento difuso	Desligado	SSAO	HBAO	HBAO	HBAO completo
Qualidade pós-processamento	Baixo	Média	Alto	Ultra	Ultra
Profundidade de qualidade de campo	Desligado	Baixo	Média	Alto	Ultra
Anti-aliasing em movimento	Desligado	Desligado	Sobre	Sobre	Sobre
Filtragem de textura	Baixo	Média	Alto	Ultra	Ultra
Qualidade de iluminação	Baixo	Média	Alto	Alto	Ultra
Qualidade da sombra	Baixo	Média	Alto	Ultra	Ultra
Qualidade do efeito	Baixo	Média	Alto	Alto	Ultra
Qualidade do modelo	Baixo	Média	Alto	Ultra	Ultra
Qualidade do sombreador	Baixo	Baixo	Alto	Alto	Alto
Qualidade da paisagem	Baixo	Média	Alto	Ultra	Ultra
Qualidade da planta	Baixo	Média	Alto	Ultra	Ultra
Formato de buffer de quadro	Compactado (32 bits)

Baixo qualidade	Média qualidade	Máx. qualidade
Baixo qualidade	Média qualidade	Máx. qualidade
Baixo qualidade	Média qualidade	Máx. qualidade
Baixo qualidade	Média qualidade