我在Google Page Speed Insights中收到错误说明：
“视口的页面内容太宽，迫使用户水平滚动。将页面内容调整为视口大小以提供更好的用户体验。”
“页面内容宽度为378 CSS像素，但视口宽度仅为320 CSS像素。”
我在标题中设置了视口，如下所示：
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
将其设置为仅时，我仍然遇到问题：
<meta name="viewport" content="width=device-width, initial-scale=1 />
它与其他许多元素一起在视口之外的元素之一是：
<a href="post-template.php...>US Carriers are...</a>
网站url mofiki.com/dev/aa/和我的CSS是：
` .rmm {
display:block;
position:relative;
width:100%;
padding:0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family:Arial;
}
.rmm a {
color:#ebebeb;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
/* */
.rmm .rmm-main-list li {
display:inline;
padding:padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}
/* MINIMAL STYLE */
.rmm.minimal a {
color:#333333;
}
.rmm.minimal a:hover {
opacity:0.7;
}
.rmm.minimal .rmm-main-list li a {
display:inline-block;
padding:10px 20px 10px 20px;
margin:0px -3px 0px -3px;
font-size:18px;
}
.rmm.minimal .rmm-toggled {
width:95%;
min-height:50px;
}
.rmm.minimal .rmm-toggled-controls {
display:block;
height:50px;
color:#333333;
text-align:left;
position:relative;
}
.rmm.minimal .rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:18px;
color:#33333;
}
.rmm.minimal .rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}
.rmm.minimal .rmm-button span {
display:block;
margin:5px 0px 5px 0px;
height:3px;
background:#333333;
width:30px;
}
.rmm.minimal .rmm-toggled ul li a {
display:block;
width:100%;
font-size:20px;
text-align:center;
padding:15px 0px 15px 0px;
border-bottom:1px solid #dedede;
color:#333333;
}
.rmm.minimal .rmm-toggled ul li:first-child a {
border-top:1px solid #dedede;
}
/* SITE STYLES */
h2, h3 {
margin: 5px 0;
}
a {
text-decoration:none;
color:#333333;
}
img.alignright {
float:right;
padding:5px 0 10px 15px;
}
.fixed-menu {
position: fixed;
top: 0;
left: 0;
right: 0;
background-color: #fff;
-webkit-box-shadow: 0 4px 4px -2px #ccc;
-moz-box-shadow: 0 4px 4px -2px #ccc;
box-shadow: 0 4px 4px -2px #ccc;
}
.main {
display: table;
}
.featured {
width:100%;
padding-top:10px;
display:table;
}
.featuredarticle {
min-width:22.5%;
max-width: 256px;
float:left;
padding: 0 .25% 15px 1.75%;
/*border: 1px solid #ccc;*/
display:table-cell;
}
.homearticle {
max-width: 48%;
margin: 0 .25% 15px 1.75%;
float: left;
display:table-cell;
}
article {
padding:0 7px 7px 7px;
}
.article_table {
display:table;
}
.content-wrapper {
display: table-cell;
width: 100%;
vertical-align: top;
white-space:pre-wrap;
}
ol, ul {
white-space:normal;
}
.sidebar-wrapper {
display: table-cell;
min-width: 350px;
vertical-align: top;
padding-left: 20px;
}
.copyright-l, .copyright-r {
width:50%;
float:left;
}
.copyright-r {
text-align: right;
}
@media screen and (max-width: 1250px) {
.featuredarticle {
min-width: 47.25%;
}
}
@media screen and (max-width: 1024px) {
.hide-on-1024 {
display: none !important;
}
.homearticle {
max-width: 98%;
}
}
@media screen and (max-width: 700px) {
img.alignright {
width:100%;
height:auto;
float:none;
padding: 0 !important;
margin:10px 0;
}
.featuredarticle {
min-width: 96.25%;
}
.content-wrapper, .sidebar-wrapper {
max-width:100%;
display:table;
margin: 0 auto;
}
.copyright-l, .copyright-r {
width:100%;
text-align: center;
padding-bottom: 20px;
}
.hide-on-mobile {
display: none !important;
}
}
`
非常感谢任何帮助。另请注意，这是对网站的重新设计，处于早期阶段。我试图将所有内容保留在Google的指导原则中，以避免以后再进行更大规模的修复。
答案 0 :(得分：2)
使用此元标记：
<meta name="viewport" content="width=device-width, initial-scale=1">
在你的HTML的头部。这会强制浏览器将html设置为与屏幕一样宽，并且应该解决您的问题。
Page Speed提供this链接，提供有关问题的信息;）