admin管理员组

文章数量:1562464

解决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

本文标签： 器中页面手机web

版权声明：本文标题：解决web页面在手机浏览器中变形的问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1727473117a1116283.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。