解决web页面在手机浏览器中变形的问题

解决web页面在手机浏览器中变形的问题

本文只提供一种在不做移动端适配或不使用移动端框架的情况下，解决页面变形的思路。

问题预览

如图所示，一些web页面在手机浏览器中会出现右侧DIV加载不完整的情况，影响阅览体验。
该页面正常情况下在PC端浏览器显示情况如下：

问题产生原因：

如上图所示，页面的背景DIV_A宽度为100%，即横向铺满浏览器窗口。内部DIV_C则限制宽度为固定值1100px。
我的手机浏览器窗口宽度达不到1100px，在加载页面的时候按照width=100%加载横向铺满的背景DIV_A时，只加载到浏览器窗口宽度便停止了，而在加载中间的内部DIV_C时，width=1100px，便会超出窗口宽度，最终造成背景DIV_A的显示宽度小于内部DIV_C，显示错位，如下图所示：

解决方法

如上图所示，在背景DIV_A和内容DIV_C中间添加一个嵌套DIV_B，设置其固定宽度为1100px，调整好位置。这样在手机浏览器中加载时即使背景DIV_A宽度不够，也可以被嵌套DIV_B完整的遮住，避免显示错位。
QQ欢迎交流402243155