Logo Hardware.com.br
UMARIZAL
UMARIZAL Highlander Registrado
15.8K Mensagens 385 Curtidas

Inserção de código HTML baseada no tamanho da tela

#1 Por UMARIZAL 24/06/2015 - 14:03
Olá amigos!

Uso o Revive Adserver (versão opensource do antigo PhpAdsNew e OpenX) para controlar a publicidade em meus sites.

Nele, crio banners de tamanhos diferentes para diferentes anunciantes e que serão exibidos em sites diferentes.

Estes banners estão ligados a zonas com tamanhos definidos, assim, cada banner aparecerá na zona com o tamanho equivalente ao do banner.

Para definir a aparição nas áreas de cada site, basta eu inserir o código da zona na área onde desejo que os banners de tal tamanho sejam exibidos.

Mas com os sites responsivos, fica complicado exibir um tamanho fixo de banner a todo instante, sem saber o tamanho da tela, até porquê o design do site se adapta a ela e um banner grande demais poderá "quebrar" o layout ou ficar com a maior parte escondida.

Então, não sei como fazer, mas gostaria de poder definir, através de algum código, algo assim:

1. Para telas com 1024 pixels ou mais de largura, exibir a zona A;
2. Para telas até 800 pixels de largura, exibir a zona B;
3. Para telas com 480 pixels ou menos de largura, exibir a zona C.

Onde definirei a zona A com banners grandes, a zona B com banners médios e a zona C com banners pequenos.

Conseguiram entender?

Não faço a mínima ideia de como fazer isso, se é através de HTML ou Javascript... alguém sabe e poderia me ajudar?
html js javascript mobile responsivo diferentes sites banners tamanho codigo html baseada insercao
Shinayder
Shinayder Veterano Registrado
669 Mensagens 118 Curtidas
#2 Por Shinayder
24/06/2015 - 14:26
@UMARIZAL, Boa Tarde!

Use o @Media via CSS, ele verifica o tamanho da screen e da largura, e conforme o parâmetro de retorno realiza a ação dentro da DIV X (No Seu caso seria DIV ZONA A), com os parâmetros declarados.

[code=CSS]
@media screen and (max-width: 1024px){
#ZonaA
{
max-width: 1024px;
max-height: 780px;
}
}

@media screen and (max-width: 800px){
#ZonaB
{
max-width: 800px;
max-height: 600px;
}
}
@media screen and (max-width: 480px){
#ZonaC
{
max-width: 480px;
max-height: 240px;
}
}
[/code]
Phenon X4 Black Box Edition 3.4 64bits | Memoria DDR3 8Gb | Nvidea Geforce GTS 450 1GB| HD Samsung SATA 500Gb e Samsung SATA 1 Tb rindo_atoa.gif
NoteBook: Em Analise nao_sei.gif
http://www.stormclouds.com.br/
marcos andrade22
marcos andra... General de Pijama Registrado
3.6K Mensagens 333 Curtidas
#3 Por marcos andra...
24/06/2015 - 18:40
Umarizal, eu tenho utilizado um framework css chamado groundwork e com ele as imagens se adaptam a resolução automaticamente, existem outros como o Bootstrap, isso ajuda e agiliza muito no trabalho.

Estas mesmas propriedades @media que o Shinayder mencionou vem de forma bem completa em um framework, não só imagens mas vale para todos os elementos.
Linux user # 493893
http://blogdotuto.blogspot.com/
UMARIZAL
UMARIZAL Highlander Registrado
15.8K Mensagens 385 Curtidas
#5 Por UMARIZAL
25/06/2015 - 08:18
Então, o site já reduz o tamanho das imagens para adaptá-las a tela.

Porém, quando são banners invocados pelo Adserver Revive ou do Google Adsense, isso não ocorre.

Os novos blocos do Adsense, que são responsivos, invocam banners conforme o tamanho da tela, mas não quando estou usando o Adserver Revive, entendem? Preciso invocar os banners do Google direto no código do site, assim, perco o controle e não posso ter outros anunciantes dividindo o mesmo espaço.
Hospedagem de Sites : http://www.mixhost.com.br
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal