HTML Iframes apresentam problemas com Viewport

Jeff54 · 24 de setembro de 2019

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 :

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

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 :

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

GabrielSennaMs · 26 de setembro de 2019

@Jeff54 Bom amigo explica o motivo do problema no seu layout fica um pouco complicado se você não tem um conhecimento solido em HTML e CSS.

Nesse site tem ótimos tutorias/Cursos de como desenvolver uma aplicação Web https://www.w3schools.com/default.asp o site é totalmente gratuito.

Dentro do site na Tag CSS, página responsiva tem um tutorial de como desenvolver um layout adaptável layout https://www.w3schools.com/css/css_rwd_intro.asp.

Recomento a você iniciar o curso de HTML e depois o de CSS para poder melhor e corrigir o seu site.

Jeff54 · 26 de setembro de 2019

16 horas atrás, GabrielSennaMs disse:

@Jeff54 Bom amigo explica o motivo do problema no seu layout fica um pouco complicado se você não tem um conhecimento solido em HTML e CSS.

Nesse site tem ótimos tutorias/Cursos de como desenvolver uma aplicação Web https://www.w3schools.com/default.asp o site é totalmente gratuito.

Dentro do site na Tag CSS, página responsiva tem um tutorial de como desenvolver um layout adaptável layout https://www.w3schools.com/css/css_rwd_intro.asp.

Recomento a você iniciar o curso de HTML e depois o de CSS para poder melhor e corrigir o seu site.

Obrigado Gabriel, vou dar uma olhada nos links.

Até que em "html" Eu me viro bem.

Eu achava que era só colocar um script na tag head do 'index' que resolvia o problema.

Bom, no geral, o "index.html", que contém o Menu azul do lado esquerdo, é 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>

Jeff54 · 28 de novembro de 2019

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

Entrar

HTML Iframes apresentam problemas com Viewport

Posts recomendados

Jeff54

GabrielSennaMs

Jeff54

Jeff54

Crie uma conta ou entre para comentar

Criar uma conta

Entrar

Quem está navegando aqui 0 usuários estão online

Últimos tópicos

Livros

Cursos

Conteúdo recente

Sobre o Clube do Hardware

Direitos autorais

Mais

Fórum

Atividades

Artigos

Análises

Livros

Cursos