门户网站在手机上htmlbody宽度没有完全填充解决办法

开始同事写的门户网站，在手机上顶部banner展示不全，在右侧空了一片。如下图

经css优化后，展示效果如下：

 

 排查问题思路：

1、html、body宽度是否设置为100%？

2、内部元素是否存在高度塌陷况？

3、不要求移动端样式适配，仅需要整个网站缩小至手机屏不变形，应该怎么设置字号等？

经排查，html、body虽然设置width：100% ，但是没有考虑到门户网站的设计稿还原效果和pc端手机端的同时适配，大部分博主会让写media标签设置不同分辨率下的兼容，但是本身客户需求只是网站不变形，这时候我们需要将html和body进行如下设置：

html,body{
   width:100%;
   min-width:1400px;/*这个是在浏览器中测试出来的具体不同手机上不会出现滚动条的宽度，通常为1200px*/
   max-width:1920px;/*为了适配大部分电脑显示器设置的最大宽度*/
}

手机上字号显示，具体可以参考rem的用法，网上有很多相关的教程，后续有时间再跟大家分享。