Question

我上传了一个针对朋友的响应式网站，无论是在智能手机还是平板电脑上观看，都无法在索引页面上呈现全宽。

这位女士帮我一个忙，因为我试图让我的名字和工作得知。她有一项业务，她希望看到成长，我们认为互联网是开始的地方。

奇怪的是，网站的其他页面在适当的宽度和高度下渲染得很好。

这让我相信问题出在＆＃34; @media屏幕＆＃34;查询。

我相信CSS＆＃34;宽度＆＃34;全宽，非移动页面代码中的其他特性和值，将会级联＆＃34;进入较小的移动查询但添加了属性＆＃34; head，＆＃34; ＆＃34; html，body＆＃34;和＆＃34;页脚＆＃34;部分，看看是否会改善这种情况。

没有。

可以在此处查看该网站：www.notaryonwheelsshaver.com

可在此处阅读CSS：http://www.notaryonwheelsshaver.com/css/nows.css

非常感谢任何帮助。

Answer 1

您的第一个媒体查询（780px）在html,body - ＆gt;中有拼写错误height: 100%x;这可能会干扰其下的min-width属性。

我不知道这是否能解决问题，但这是我注意到的。

Answer 2

我认为问题出在您的CSS文件中：

    html, body {
        font-family: Tahoma, Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 26px;
        background-color: #FFF;
        color: #555;
        padding: 0;
        margin: 0;
        height: 100%;
        /*width: 100%;*/
    }

/*width: 100%;*/被注释掉，这使浏览器跳过代码尝试将其更改为：

    html, body {
        font-family: Tahoma, Helvetica, Arial, sans-serif;
        font-size: 14px;
        line-height: 26px;
        background-color: #FFF;
        color: #555;
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
    }

编辑：您的宽度也在注释中：

.wrapper {
        /*min-width: 100%;*/
        min-height: 100%;
    }

移动设备仅显示页面宽度的80％

2 个答案: