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

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


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

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

1

min-width:1000px;

问题即得到解决。

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

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

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