Page Speed Insights - 按视口调整内容大小? [英] Page Speed Insights - Size Content to Viewport?
问题描述
我在 Google Page Speed Insights 中收到错误说明:
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."
页面内容的宽度为 378 CSS 像素，但视口的宽度仅为 320 CSS 像素."
"The page content is 378 CSS pixels wide, but the viewport is only 320 CSS pixels wide."
我在标题中设置了视口，如下所示:<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/>
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 />
它与许多其他元素一起在视口之外的元素之一是:<a href="post-template.php...>美国运营商是...</a>
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>
网站 url mofiki.com/dev/aa/是，我的 CSS 是:
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;
}
}
`
任何帮助将不胜感激.另请注意，这是对处于早期阶段的网站的重新设计.我只是想在我去的时候把所有的东西都保留在 Google 的指南中，以避免以后不得不做更大的修复.
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.
推荐答案
使用这个元标记:
<meta name="viewport" content="width=device-width, initial-scale=1">
在你的 html 的头部.这会强制浏览器使 html 与您的屏幕一样宽，并且应该可以解决您的问题.
In the head of your html. This forces the browser to make the html as wide as your screen and should fix your problem.
Page Speed 提供了此链接，其中包含有关问题的信息；)
And Page Speed offers this link with information about the problem ;)
这篇关于Page Speed Insights - 按视口调整内容大小?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
