问题
I am getting the error in Google Page Speed Insights stating:
"The page content is too wide for the viewport, forcing the user to scroll horizontally. Size the page content to the viewport to provide a better user experience."
"The page content is 378 CSS pixels wide, but the viewport is only 320 CSS pixels wide."
I have the viewport set in the header as follows:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
I still have the issue when set it to only:
<meta name="viewport" content="width=device-width, initial-scale=1 />
One of the elements that it says along with many others is outside of the viewport is:
<a href="post-template.php...>US Carriers are...</a>
The site url mofiki.com/dev/aa/ is and my CSS is:
` .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;
}
}
`
Any help would be greatly appreciated. Also take note that this is a redesign of a website that is in the early stages. Just trying to keep everything in Google's guidelines as I go to avoid having to do larger fixes later on.
回答1:
Use this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
In the head of your html. This forces the browser to make the html as wide as your screen and should fix your problem.
more info here
And Page Speed offers this link with information about the problem ;)
来源：https://stackoverflow.com/questions/30460380/page-speed-insights-size-content-to-viewport