Page Speed Insights - 根据视口调整内容大小？

Question

我在 Google Page Speed Insights 中收到以下错误：

"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."

我在 header 中设置了如下视口： <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> 将其设置为 only 时我仍然遇到问题： <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 的指导方针中，因为我会避免以后不得不做更大的修复。

Answer 1

使用此元标记：

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

在你的脑袋里html。这会强制浏览器使 html 与您的屏幕一样宽，应该可以解决您的问题。

more info here

并且 Page Speed 提供 this link 以及有关问题的信息 ;)

Page Speed Insights - 根据视口调整内容大小？

Page Speed Insights - Size Content to Viewport?

css

viewport

google-pagespeed