我是从巴西写信的。我以葡萄牙语参加了该论坛，但没有解决我的问题。我希望我的英语不会太差。
嗯，经过大量研究，我用iframe制造了我的HP。
我知道一点Html，仅此而已。我已经尝试通过复制著名的“包含”来使用PHP，但是……我放弃了。
我有很多页面，并且在一侧的菜单使在另一侧的访问变得容易。
我的网站由一个“ index.html”页面组成，该页面位于屏幕的左侧，根据用户在菜单上的单击，其内容在右侧。
在台式机上，该站点运行良好。
在智能手机中，外观甚至是合理的，并且像这样：
[我了解到Google已宣布将优先为适合移动设备的页面编制索引。
嗯，我将meta标记放在index.html的开头：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0 maximum-scale=1.0">
然后问题开始了。该网站看起来像这样：
相同的元标记也已放置在右侧的所有内容上，但是...不能解决问题。
作为补充，左侧包含蓝色菜单的“ index.html”看起来像这样：
<?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>
<!-- I THINK THE PROBLEM IS HERE : -->
<div id="conteudo" style="float: right;" class="spaceWrap">
<iframe class="viewPort" name="conteudo" src="prin.html" align="right"></iframe></div>
</body>
</html>
您能帮忙吗？
谢谢你。
杰夫
经过大量研究，我最终为那些没有太多经验而最终使用iframe的人找到了解决方案。
我们知道GoogleBot一直在为其索引建立移动优先级。
Google本身建议添加Meta标签：
<meta name=viewport content="width=device-width, initial-scale=1">
但是这仅对具有NOT具有iframe的网站有效。
经过几个月的研究，我发现了非常简单的添加肯定可以解决此问题。
只需在上述元标记的末尾添加以下内容：viewport-fit = cover ....（!!!）
然后它将看起来像这样：
<meta name=”viewport” content=”width=device-width, initial-scale=1, viewport-fit=cover”>
[我只是不明白为什么Google不会对此发出警告。经过了数月的研究，与论坛的联系，给专家的电子邮件等，但我只能在博客评论。
在此站点上，他们甚至还建议放置高度调整大小：height = device-height
因此，我们拥有带有适用于iframe的视口的完整元标记：
<meta name=”viewport” content=”width=device-width, initial-scale=1, height=device-height, viewport-fit=cover”>
我希望这么多的搜索时间将留给经历过此过程的其他人。
谢谢。
杰夫