Question

我努力让网站使用响应式CSS。我可以在我的iPhone上看到OK，但Google PageSpeed Insight会向视口显示大量的内容。错误。

我可以通过在CSS中添加一些带有一些绝对宽度的额外语句来解决这些错误，但是当在iPhone和iPhone上查看网站时，所有内容都只占据了屏幕左侧的一小部分。

我已经尝试了一切我能想到的但却无法让网站填满我手机屏幕的整个宽度并通过Google PageSpeed Insight测试。我哪里错了？

您可以在此处查看该网站：http://www.aberlericottages.co.uk

我用于较小屏幕的（现在相当混乱）条件CSS是：

@media (max-width: 400px) {
html, .header-bg {max-width: 100%;}
body {max-width: 100%; background: #eee;}
header {max-width: 100%;}
.wrapper, .grid_12, .wrapper-pad {max-width: 100%; height: auto;}
header nav ul.sf-menu {display: none;}                                        
#faded, #logo, #tail-top-left {display: none; height: 0px;}                       
.main, .container_12 {max-width: 100%; height: auto; margin:0;}                       
.container_12 .grid_8, .container_12 .grid_12, container_12, footer {max-width: 100%;}    
section#content {background: #eee; max-width: 100%; margin: 0;}                   
span, .grid_12, h2 {max-width: 100%;}                                         
p {max-width: 100%; padding-right: 5px;}                              
span.quality, div.quality {width: 200px; display:none;}                           
container_12.grid_12 {max-width: 100%;}                                       
footer strong.fright {float: none;}                                           
footer .grid_12 {padding: 8px 0 0;}                                           
footer.container_12 {max-width: 325px; margin:0;}                                 
footer {background: #211c1b; height: auto; padding-bottom: 6px; margin:0; max-width: 99%;}
nav ul     { display: none; }                                                 
nav select { display: inline-block;}                                              
.line-hor {display: none;}                                                    
img.fright {float: none;}                                                     
aside.row {max-width: 100%; margin: 0; padding:0; background: transparent;}

}

手机上并不是很好，也没有通过Google PageSpeed Insight测试。更改CSS语句：

.wrapper, .grid_12, .wrapper-pad {max-width: 100%; height: auto;}

到

.wrapper, .grid_12, .wrapper-pad {max-width: 300px; height: auto;}

就谷歌PageSpeed Insights而言，修复了一些问题，但在手机上看起来很糟糕。我哪里错了？为什么100％不能作为最大宽度工作？

Answer 1

如果容器的溢出设置为隐藏，则Google不允许内容超出视口宽度事件。我发现的一种方法是在视口外部将溢出内容的显示设置为无，并在需要时将其设置为其他内容。这种页面速度的常见情况＆＃34;错误＆＃34;在画布外导航。

使用响应式CSS和Google PageSpeed Insight挣扎

1 个答案: