Ir para conteúdo
Fórum Script Brasil
  • 0

Iframes e Viewport


Jeff123

Pergunta

Olá,

Depois de muito pesquisar, acabei fazendo minha HP com um Iframe.

Conheço um pouco de Html e só. Já tentei fuçar no PHP,  com o famoso "Include", mas acabei desistindo.

Tenho muitas páginas e o Menu de um lado facilita o acesso do outro lado.

Meu site é composto de uma página "index.html" que fica à esquerda da tela e, à direita, ficam os conteúdos, de acordo com que o usuário clica no Menu.

Nos desktops, o site funciona bem.

Nos Smartphones, a aparência é bem razoável e é mais ou menos assim :

Smartphone-1.thumb.jpg.ff40d87ff4fca17f1a027c7cab738b75.jpg

 

================================

 

Só que há pouco tempo, li que o Google anunciou que vai dar prioridade de indexação às páginas adaptadas a dispositivos móveis.

Muito bem. Coloquei a meta tag na Head da index.html

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 maximum-scale=1.0">

 

Aí, começaram os problemas. O site ficou assim :

Smartphone-Viewport.thumb.jpg.5ce008cbffd47911b08d9ca1b76c21c1.jpg

 

A mesma Meta Tag também foi colocada em todos os conteúdos que ficam à direita, mas ... não resolvem os problemas.

Poderiam ajudar?

Agradeço antecipadamente.

Jeff

Editado por Jeff123
Link para o comentário
Compartilhar em outros sites

2 respostass a esta questão

Posts Recomendados

  • 0

Só para complementar, o "index.html" que é a parte azul da esquerda, está parcialmente assim :

 

<?xml version="1.0"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">


<html>
<head>

<title>Ciencia,Reportagens, Kardec</title>

<META http-equiv="Content-Language" CONTENT="pt-br">

<meta http-equiv="Content-Type" content="text/html; charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 maximum-scale=1.0">

(...)

<style type="text/css">

html, body {
    
    height: 100%;
    padding: 0;
    margin: 0;

}

 iframe { top:0; width:auto; left:auto; height:100%; border:none; background:#ffffff; }
    

div {
   
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 0;


}

#navcontainer
{
position: fixed;
top: 2px;
bottom: 0px;
background: #0000CD; /*Edite a cor de fundo*/
border-right: 10px solid #696969;
width: 23.1%;
margin: 0;
padding: 0.9em 1;
font-family: georgia, serif;
font-size: 23px;
text-align: left;
font-weight: bold;
overflow-y: auto;
.contentFullFixed{
    position:fixed;
    width:100%;
    top: 0;
    left:0;

}

}

ul#navlist
{

text-align: center;
list-style: none;
padding: 0;
margin: 0 auto;
width: 90%;


}


ul#navlist li
{
display: block;
margin:  5;
padding: 0;
height: 6%;
padding-top: 0.1em;
}

ul#navlist li a
{
display: block;
width: 190px;


border-width: 4px;
border-color: #fff #8470FF #ccc #fff;
border-style: solid;
color: #000000;
text-decoration: none;
background: #1E90FF; /*Edite a cor de fundo*/
}

#navcontainer>ul#navlist li a { width: auto; }

ul#navlist li#active a
{
background: ##1E90FF; /*Edite a cor de fundo*/
color: #000000;
}

.selected {
    background-color : #fff000;
}

ul#navlist li a:hover {color: #FFFFFF}

ul#navlist li a:active
{
color: #FFF;
background: #B0C4DE;
border-color: #000000 #fff #fff #ccc;


}

#conteudo {

     width: 75.7%;
     position: relative;
     height: 100%;
     text-align: center;
     
     
}
   
    a:hover { color: green}    
    A:link {text-decoration:none}
    A:visited {text-decoration:none}
    A:hover {text-decoration:underline}
    A:active {text-decoration:underline}

iframe {
    
    border: none;
    width: 100%;
    height: 100%;
    border: none;

}

img{
 
display: block;

margin: 30 auto;

}

</style>

</head>


<body>

(...)

<div id="navcontainer" style="border: 5px solid #696969; float: left;">

<ul id="navlist">


<li><a href="prin.html"  target="conteudo">Início</a></li>
    
<li><a href="textos.html"  target="conteudo">Textos</a></li>

(...)

(...)

</ul>
</div>

                                            
                                            
<!--  EU ACHO QUE O PROBLEMA ESTÁ AQUI :  -->

<div id="conteudo" style="float: right;" class="spaceWrap">

<iframe class="viewPort" name="conteudo" src="prin.html" align="right"></iframe></div>

</body>


</html>  
Link para o comentário
Compartilhar em outros sites

  • 0

Olá,

Depois de muito pesquisar, acabei achando a solução para quem, sem muita experiência,  acaba usando Iframes.

Sabemos que o Crawler do Google tem dado prioridade para dispositivos móveis, em suas indexações.

O que o próprio Google recomenda é a inclusão da Meta Tag :

<meta name=viewport content="width=device-width, initial-scale=1">

 

Só que isso só funciona bem para site que NÃO tem Iframes.

Após meses de pesquisas achei um complemento BEM SIMPLES e que resolve definitivamente esse problema.

É só adicionar, ao final da Meta Tag acima, o seguinte :   viewport-fit=cover .... (!!!)

Então ficará assim :

<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>

 

Eu só não entendo porque o Google não avisou sobre isso. Precisou meses de pesquisas, contatos com Fóruns, e-mails para especialistas, etc, etc. E mesmo assim só consegui descobrir num site estrangeiro.

 

Neste site, recomendam até que se coloquem o redimensionamento da altura também :   height=device-height

E assim, temos a Meta Tag completa com Viewport para Iframes :

 

<meta name=”viewport” content=”width=device-width, initial-scale=1, height=device-height, viewport-fit=cover”>

 

Espero que tanto tempo de procura sirva para outras pessoas que passaram por isso.

Obrigado.

Jeff

 

Editado por Jeff123
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152k
    • Posts
      651,8k
×
×
  • Criar Novo...