100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全

Tips: 调试 iPad 或 iPhone 可在设置中启动调试模式，在 Mac 中的 Safari 浏览器 同样开启开发者模式后，进行联机调试。功能彪悍。最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ；到百度搜索后发现，safari 中 viewport 默认宽度为 980px，若事先未指定其初始 viewport 宽度，则会默认按照 980px 处理。可以默认初始化 viewport 宽度或在 css 中设定 min-width，但最简单的方法可以在 head 标签中初始化好 viewport。详见下方代码：<metaname="viewport"content="width=网页真实宽度, initial-scale=倍数值"/>
假设网页宽度为 960px 或 1080px，可在width中加入该值，并将 initial-scale 设置一个适合的倍数值。例如一个页面的宽度为 1080px，则设定为：<metaname="viewport"content="width=1080, initial-scale=0.9"/>
这样不管加载前后切换横屏还是竖屏，都可以友好显示。

转载于:https://www.cnblogs.com/cqchai/p/3595975.html

100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全相关推荐

html图片缩放全部显示不全,100% width CSS 在缩小/放大窗口时候内容被截断或显示不全...
故障现象: 当我们在写代码的时候如果,页面头部(#header )样式定义使用了100%宽度,那么当我们把浏览器窗口缩小的时候就会发现有部分内容被截断或显示不全: 原因分析: 当窗口缩小时,浏览器默认 ...
CSS:头部导航设置复杂背景图片自适应显示（与menu菜单贴合-自用）
[2021/07/06] 更新第二种方式,目前已在项目上应用采用padding-top百分比的方法,具体操作如下: 1.计算padding-top值(例如图片宽1920,高1080) padding ...
iPhone Safari下iframe不显示滚动条无法滚动的解决方法
在iframe外层包一层div,添加如下样式: style="-webkit-overflow-scrolling:touch;overflow:auto;" @media onl ...
css 文字重叠_同时文字字体重叠显示不全解决方法
CSS DIV构造中泛起单行或多行翰墨的每行文字形式不能透露表现全,高低行翰墨有一点点堆叠征兆,翰墨字体只表示一半解决门径,在低版本IE额定显着笔墨字体透露表现不全,在google涉猎器等高版本IE阅 ...
CSS 导航栏选中框背景高亮显示
CSS 导航栏选中框背景高亮显示效果显示以下为实现代码代码片. <!DOCTYPE html> <html lang="en"> <head&g ...
background图片叠加_css怎么让两个背景图片重合显示？
css怎么让两个背景图片重合显示?下面本篇文章给大家介绍一下使用css让让两个背景图片重合显示的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 在css中,可以使用backgr ...
css就近原则_细品100道CSS知识点（上）「干货满满」
作者:hh_phoebe 转发链接:https://juejin.im/post/5ee0cf335188254ec9505381 目录细品100道CSS知识点(上)[干货满满]本篇细品100道C ...
[19/06/07-星期五] CSS基础_布局定位背景样式
一.固定布局(不适应设备的浏览器的变化) <!DOCTYPE html> <html><head><meta charset="UTF-8" ...
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放
video标签或微软云 azure-media-player 禁止在iphone safari中默认全屏播放关键代码 webkit-playsinline='true' playsinline= ...

100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全

100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全相关推荐

最新文章

热门文章