Jump to content
Jeff123

Iframes e Viewport

Recommended Posts

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.9e6122f70cd5926bf8c241a66dc06e2b.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.687c53b927bc372cdfddc240cdf8f7b6.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


 

Share this post


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

Share this post


Link to post
Share on other sites

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> 

 

Share this post


Link to post
Share on other sites

 

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

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Elias meirelles
      Bom dia eu sou novo em programação eu queria saber como eu faço para colocar um vídeo embedado do youtube no meu site sem os comando e sem a logo do youtube alguém me ajuda ? esse e o código. 
       
      <iframe width="560" height="315" src="https://www.youtube.com/embed/ba34ILUcGAI?controls=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>  
    • By Amanda2019
      Pessoal, 
       
      Tenho uma página principal que tem um IFRAME até ai tudo bem eu quero que o conteúdo dessa página seja redimensionado conforme a página principal
       
      <iframe src="SlidePromo/slider.html" style="width: 100%; height: 599px;" frameborder="0" scrolling="NO" marginheight="0" marginwidth="0" ></iframe> A página slider tem um carrocel que quando eu abro só a página slider.html ela já está redimensionando automátivo. Quero fazer na principal que chama ela
    • By delgps
      Pessoas tem como eu carregar o wordpress dentro de um iframe.
      Eu preciso colocar dois iframe um para carregar o wordpress e outro para carregar um player de radio online. O iframe é para navegar no site sem interromper o áudio da rádio.
      Tentei colocar dentro de um iframe e carregou a primeira tela porém os outros links estão todos como link não encontrados.
      Tem como rodar o wordpress dentro de um iframe?
    • By vinihhylian0103
      Olá, Boa Noite.
      Estou usando o Iframe pra exibir meu form de login na minha página central, porém, quando eu clico no botão login, o profile parece somente no iframe, teria como eu fazer o profile ser redirecionado  na página principal.
       
      Segue o código:
        <div class="modal fade" id="modalLRFormDemo2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">     <div class="modal-dialog cascading-modal" role="document">       <!--Content-->       <div class="modal-content">                            <iframe marginwidth="50" height="500px" width="500px" src="CADASTROS_LOGINS\LOGIN\index.html"> Seu navegador não suporta frames )= </iframe>                 <center><button type="button" class="btn btn-outline-info waves-effect ml-auto" data-dismiss="modal">Fechar</button></center>                 <br>               </div>             </div>             <!--/.Panel 8-->           </div>         </div>       </div>  
    • By bolla79
      TEnho uma barra de contraste em um página que utiliza iframe.
      Quando clico no contraste para mudar, muda a página toda, menos a que está dentro do iframe. Só muda se eu atualizar com o botão direito depois o iframe
      Teria como cada vez que eu clicar no contraste, dar um reload apenas no iframe? muda a página por fora normalmente e reload no iframe.
       
      Abs
       
      Paulo
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.