Iframes e Viewport

[Jeff123 0]

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

 

[Megao 0]

21 horas atrás, Jeff123 disse:

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

 Por que iframe? Sinceramente eu já tentei usar iframes, mas não tive uma boa experiência em dispositivos mobiles.

~

Detesto trabalhar com sites responsivos, mas não vai ser um meta tag que vai deixar o layout responsivo.

21 horas atrás, Jeff123 disse:

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.

Isso já vem sendo falado e modificado desde 2015, se eu não me engano.

Os sites responsivos ficam na frente em um tipo de "ranking" do Google, isso porque a quantidade de pessoas com um celular na mão o tempo todo vem aumentando bruscamente.

 

Você pode tentar editar esse layout e trabalhar com max-width, min-width, pixels e porcentagens.

 

Acho que a maior cagada do mundo é tentar transformar um site em responsivo, sendo que foi criado especificamente para desktop. Tem tantas tecnologias e frameworks disponíveis para criar um layout totalmente responsivo em pouco tempo.

Vou listar algumas:

• 1. Bootstrap

Sem dúvida é um dos melhores frameworks (e piores dependendo do teu propósito). 

 

Pontos positivos:

• Muito fácil de usar;
• MUITO conteúdo na internet;
• Código limpo e organizado;
• Possui programas para criar layouts com bootstrap apenas arrastando;
• Open source;
• Vários sites e temas prontos em bootstrap na internet;
• Muito leve e otimizado.
• Navs bonitas e fáceis;

Pontos negativos:

• Se não souber ou não souber editar o framework, teu site vai ficar a cara de outros 1000 na internet.
• Design muito repetitivo, focado em trabalhos rápidos ou interessados em um layout simples e organizado.
• Utiliza muitas classes para chegar em um resultado.
• Excessivamente simples. Recomendo apenas para sites ou painéis corporativos. 

Programas que você pode usar para criar layouts com o bootstrap:

1. Pingendo (Free ou Premium),

2. Bootstrap Studio (Pago).

 

~

 

• 2. W3.CSS

Um tipo de framework, bem próximo do bootstrap até, mas na minha opinião, combina muito bem com o Bootstrap se souber usá-los.

Ele não possui um programa para editar o código através de uma interface gráfica (eu acho), mas é bem fácil de usar. No próprio site https://www.w3schools.com/w3css/ tem vários tutoriais e códigos prontos pra você usar do jeito que achar melhor. Todos os códigos do framework são responsivos.

 

~

• 3. Muse CC

É um programa descontinuado da Adobe. Não sei se é uma boa ideia divulgar aqui um programa descontinuado, ou seja; sem suporte. Você decide o que faz com essa informação.

Com ele você pode desenhar layouts responsivos (se souber usá-lo), importar imagens, etc.

 

Pontos positivos:

1. Bem fácil de usar e editar;
2. Exporta o layout pronto com HTML e CSS criado;
3. Pode criar sites responsivos para todo o tipo de resolução;
4. Layout compatível com todos os navegadores.

Pontos negativos:

1. Descontinuado; sem suporte.
2. Entrega um código exportado muito ruim;
3. Se não souber editar ou não tiver paciência para consertar algumas coisas no código depois de exportado, desista dele!

 

~

• 4. Criar e redirecionar para uma página capada e feita para dispositivos móveis.

Sinceramente essa é a menos recomendada, mas se tu não tem tempo para criar um layout responsivo ou paciência para refazer o atual de um jeito responsivo, vai ter que ser assim. É uma gambiarra e tanto.

Basta recriar (só isso, rsrs) o site de uma maneira que o resultado fique agradável em um dispositivo mobile.

Após recriar, é só definir o link da página mobile no código abaixo.

//  coloca isso dentro da tag <head> </head>


<script type="text/javascript">
    var url_mobile = "LINK_DA_PAGINA_MOBILE";
    (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od|ad)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b})(navigator.userAgent||navigator.vendor||window.opera,url_mobile);
  </script>

 

Boa sorte.

[Jeff123 0]

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> 

 

[Jeff123 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