页面速度洞察-大小内容到查看端口？

Question

我收到了谷歌页面速度洞察中的错误声明：

“页面内容对于视图端口太宽，迫使用户水平滚动。将页面内容调整到视图端口以提供更好的用户体验。”

“页面内容为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/ is和我的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;
                    }
                }
`

任何帮助都将不胜感激。还请注意，这是一个重新设计的网站，是在早期阶段。为了避免以后做更大的修正，我只想把所有东西都保留在谷歌的指导方针中。

Answer 1

使用这个元标签：

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

在你的主页上。这迫使浏览器使html与您的屏幕一样宽，并且应该解决您的问题。

这里有更多的信息

页面速度提供这链接，提供有关问题的信息;)