关于在PC上正常,在iPad浏览器中页面向左偏移的问题

一个很老的问题,一年前在做VHR项目的时候就碰到过,当时解决后没做记录。这次做Hilton网站的时候又碰到,一时记不起是如何解决的了,只好通过排差法从头来过。

如图页面,在PC各浏览器都完美,但一些板块在iPad上似乎无法居中对齐,底部文字又是撑满的。CSS设置宽度的时候顶部大图是100%,下面文字区域宽度1000px。检查了其他几个有同样问题的页面,宽度1000px的区域在iPad上都是撑满了浏览器宽度,而宽度是100%的区域反而都在右侧缩进去一截。这个问题在PC上不易被发现,但在iPad上很普遍。新做的网站一定要在iPad上检查一下哦!
关于在iPad浏览器中页面向左偏移的问题

最近做的另一个项目,也是整个页面在右边缩进了一小段,看了下CSS结构,也都是宽100%的容器出问题。在header这里我更是想当然地以为浏览器会自动把没宽度的div默认为100%,而导致背景图片都没显示全。
关于在iPad浏览器中页面向左偏移的问题

PC的分辨率差异太大,100%宽的做法是不可能放弃的,所以试着给100%宽度添加一条备用属性:

1
min-width:1000px;

问题即得到解决。
关于在iPad浏览器中页面向左偏移的问题
关于在iPad浏览器中页面向左偏移的问题

总结:为每个最大的容器多写一个min-width,可以让iOS浏览器正确渲染容器背景,从而避免这样的"错位"问题。

本站所有文章均为原创,欢迎转载,请注明文章出处:https://blog.brain1981.com/1.html。百度不可信,搜索请谨慎。技术类文章一般都有时效性,本人习惯不定期对自己的博文进行修正和更新,因此请访问出处以获取本文的最新版本。

关注我们的微信公众号-JennyStudio 本站记录了近几年的工作中遇到的一些技术问题和解决过程,“作品集”还收录了本人的大部分作品展示。除了本博客外,我们的工作室网站 – JennyStudio,内有更多作品回顾和展示。
您也可以扫描左边的二维码,关注我们的微信公众号,在微信上查看我们的案例。

发表评论

电子邮件地址不会被公开。 必填项已用*标注