• 欢迎访问奇跡の海网站,本站不上传任何资源,所有资源均来自于网络,欢迎加入奇跡の海~! QQ群
  • 本站下载资源为网络上收集整理而来,并且以计算机技术研究交流为目的,版权归原作者所有,仅供大家参考,学习,不存在任何商业目的与商业用途.
  • 本站系统镜像均来自于官方原版,ed2k可视为P2P下载链接。所有操作系统默认均为试用版,如有正版密钥可以有效激活,本站不提供任何激活和相关服务。

100% width CSS 在缩小/放大窗口时候内容被截断或显示不全

WP主题 奇跡の海 1年前 (2017-07-08) 696次浏览 已收录 0个评论 扫描二维码

100% width CSS 在缩小/放大窗口时候内容被截断或显示不全
故障现象:

当我们在写代码的时候如果,页面头部(#header )样式定义使用了 100%宽度,那么当我们把浏览器窗口缩小的时候就会发现有部分内容被截断或显示不全;

原因分析:

当窗口缩小时,浏览器默认 100%宽度为浏览器窗口的宽度。而忽略了下部内容层固定宽度(比如你设置的网页整体宽度为 960px)。从而出现了固定宽度大于 100%宽度的现象。浏览以此理解来解析页面,就出现了容器宽度理解上的差异,出现了一个非常奇特的 BUG;

解决办法:

只需要使用 css 的 min-width:980px 对 width:100%的对象加以限制即可以解决;
如果在做自适应网页或测试网页在不同设备下的兼容性测试时候,比如 iPad 的 Safari 浏览器中背景显示不全,等问题,都可以尝试定位到该 div 后,即很有可能发现是指定 css 的宽度为 100%导致问题;safari 中 viewport 默认宽度为 980px,若事先未指定其初始 viewport 宽度,则会默认按照 980px 处理。可以默认初始化 viewport 宽度或在 css 中设定 min-width 即可解决;

在做一个 wap 网站时发现在 IPONE4 页面显示宽高为 320*480 页不是 640*960 了,这样显示就不全屏了,下面我来告诉你具体的解决办法。

如果你也遇到了同样的问题,想要快速的解决掉它。你可以试着将 viewport 设置或添加成如下 CODE:

<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5" />

如果恰巧解决了这个问题,那么恭喜你!

两种:

缩放自适应
响应式布局
第一种,缩放自适应的页面, 可以使用

<!--最普通最常见的用法-->
<meta name="viewport" content="width=device-width" />
<!-- 如果有足够的高清图资源,主要支持 retina 设备(ip4/4s),那么推荐下面这种-->
<meta name="viewport" content="width=640" />
<!-- 如果针对 new iPad,甚至可以试试这个-->
<meta name="viewport" content="width=1536" />

第二种,复杂的响应式布局,实际就是要求页面在切换横屏时不放大,从而留出空白用以填充或调整列布局。
此时可以看到无论 width 还是 initial-scale 都无法限制横屏时的放大,因而必须用上 minimum/maximum-scale,而 width 和 initial-scale 则推荐使用 initial-scale,使三个 scale 参数统一。

<!--最普通最常见的用法-->
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1" />
<!--for retina screen-->
<meta name="viewport" content="initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5" />

如果你在 Android,或其它移动设备上也遇到了分辨率与页面尺寸不符的情况,你也可以试着怀疑一下 viewport。


版权声明:本站所有文章和资源使用BY-NC-SA协议授权发布 , 转载应当以相同方式注明文章来自“SeaOMC.COM->100% width CSS 在缩小/放大窗口时候内容被截断或显示不全!在下边可以分享本文哦!
本文最后更新于2018年3月14日,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
喜欢 (2)
[]
分享 (0)
奇跡の海
关于作者:
一个WordPress菜鸟!
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址