Jeff123
-
Total de itens
12 -
Registro em
-
Última visita
Sobre Jeff123
-
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
-
Olá Megão, Grato pela resposta. Admito que criei o site sem muitos critérios, só copiando uns scripts daqui, dali... e acabou razoável para desktops. Mas ... adaptar para dispositivos móveis... huummm... Tá me dando dor de cabeça. O site tem umas 130 páginas. Por isso usei o "iframe" que é mais simples para pessoas inexperientes como Eu. Sei que existem opções melhores, mas como ele (Iframe) vem quebrando o galho até agora, resolvi deixar, ou seja, com o Menu azul à esquerda (Fixo) e à direita vão aparecendo as páginas de acordo com a escolha feita no citado "Menu". Só para complementar, o "index.html" que é a parte azul da esquerda, é 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>
-
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