Iframes and Viewport

Asked

Viewed 210 times

-1

Hello,

After a lot of research, I ended up doing my HP with an Iframe.

I know a little bit about Html and that’s it. I’ve tried to poke around in PHP, with the famous "Include", but I gave up.

I have many pages and the Menu on one side facilitates access on the other side.

My site is composed of an "index.html" page that is to the left of the screen and, to the right, are the contents, according to which the user clicks in the Menu.

On desktops, the site works well.

In smartphones, the appearance is very reasonable and is more or less like this :

Smsartphone-1

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

Only recently, I read that Google announced that it will give priority to indexing pages adapted to mobile devices.

Very good. I put the meta tag in the head of the index.html :

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 maximum-scale=1.0">

Then the problems started. The site was like this :

Smartphone-2

The same Meta Tag has also been placed on all the contents that are on the right, but ... do not solve the problems.

Could help?

Thank you in advance.

Jeff

iframe viewport

2 answers

1

Hello,

After a lot of research, I ended up finding the solution for who, without much experience, ends up using Iframes.

We know that Google Crawler has prioritized mobile devices in its indexing.

What Google itself recommends is the inclusion of Meta Tag :

<meta name=viewport content="width=device-width, initial-scale=1">

Only this only works well for website that NAY has Iframes.

After months of research I found a complement VERY SIMPLE and that definitely solves this problem.

Just add, at the end of the Meta Tag above, the following : viewport-fit=cover .... (!!!)

So it stays that way :

<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>

I just don’t understand why Google didn’t warn you about this. It took months of research, contacts with forums, emails to experts, etc, etc. And yet I could only find out on a foreign site.

In this site, they recommend to place the height resizing also : height=device-height

And so, we have the full Meta Tag with Viewport for Iframes : 

<meta name=”viewport” content=”width=device-width, initial-scale=1, height=device-height, viewport-fit=cover”>

I hope all this searching time is for other people who’ve been through it.

Thank you.

Jeff ​

0

Just to complement, the "index.html" that contains the Blue Menu on the left, is thus partially :

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

Browser other questions tagged iframe viewport

You are not signed in. Login or sign up in order to post.