Jump to content
Fórum Script Brasil
  • 0
Sign in to follow this  
Jeff123

Iframes e Viewport

Question

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

Edited by Jeff123

Share this post


Link to post
Share on other sites

2 answers to this question

Recommended Posts

  • 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>  

Share this post


Link to post
Share on other 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

 

Edited by Jeff123

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

Cloud Computing


  • Forum Statistics

    • Total Topics
      148409
    • Total Posts
      643823
×
×
  • Create New...