当前位置：首页 > Css

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

happyfhb12年前 (2015-02-09)Css2887

摘要：最近在做一个页面时，发现在 iPad 的 Safari 浏览器中背景显示不全，定位到该 div 后发现所指定 css 的宽度为 100% ；到百度搜索后发现，safari 中&nbs…

最近在做一个页面时，发现在 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"/> 
这样不管加载前后切换横屏还是竖屏，都可以友好显示。

扫描二维码推送至手机访问。

本文链接：http://www.fenghaibin.com/?id=1185

返回列表

上一篇：父级div height:auto无效解决办法

下一篇：css如何让表格table的边框为1像素

“100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全” 的相关文章

css高度自适应

人学习某个东西到一定程度的时候思维就固化了.不懂得变通.今天遇到一个css高度自适应问题我竟然用 height:100%;真是好搞笑.幸亏志伟兄及时指点.应该是 height:auto;很菜鸟的问题但是却难了我一天真是要好好学习了.…

解决IE浏览器不支持min-height 的问题

根据海滨的实践.min-height样式IE是不支持的唯有FF支持. 但是可以用下面的办法搞定最小高度问题.height:auto!important; height:400px; /*假定最低高度是400px*/ min-height:400px;…

div中英文无法自动换行的解决方法

问题：在一个设定好宽度的div中，当我们输入的中文文字长度超过了设定宽度时，会自动换到下一行。但是，如果输入的是英文字母，那么，无论你div设定宽度为多少，英文字母都是不换行直接在同一行输出，导致div的宽度远远超出设定的大小。原因：这是因为div中，英文字母之间没有空格的话，它会默认认为这是一个英…

父级div height:auto无效解决办法

一种可能情况因为父div中的div处于浮动状态。浮动是会脱离文档流的，内部两个层就不会局限于父层。所以父层不知道内部的高度。但清理浮动，可以把他们“拉”回来。…

评论列表

性药网

1周前 (11-01)

乖乖饮料网上怎么买《认准官网 a k a k 4 7 . c o m》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 乖乖饮料批发渠道《认准官网 a k a k 4 7 . c o m》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 1 . 乖乖饮料官网订购渠道《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 2 . 崔倩药店地址《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 3 . 乖乖商城和崔 Q 药商城哪个好《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉4 . 听华水商城 A P P 《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 5 . 广州谜水商城《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 6 . 三座仑崔 q 药商城《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 催谜到付《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 1 . 弥漫官方订购《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 2 . 什么烟使人乖乖听话《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 3 . 什么烟人闻了会听话《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 4 . 崔 P 商城官网入口《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 5 . 谜

回复该评论

发表评论

: 海海日记-冯海滨博客

Good Luck To You!

1091文章

69评论

235.15万浏览

最近评论

性药网评论文章：

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

乖乖饮料网上怎么买《认准官网 a k a k 4 7 . c o m》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 乖乖饮料批发渠道《认准官网 a k a k 4 7 . c o m》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 1 . 乖乖饮料官网订购渠道《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 2 . 崔倩药店地址《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 3 . 乖乖商城和崔 Q 药商城哪个好《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉4 . 听华水商城 A P P 《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 5 . 广州谜水商城《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 6 . 三座仑崔 q 药商城《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 催谜到付《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 1 . 弥漫官方订购《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 2 . 什么烟使人乖乖听话《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 3 . 什么烟人闻了会听话《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 4 . 崔 P 商城官网入口《认准官网 a k a k 4 7 . c o m 》其他广告全是骗子 ▁▂▃▄▅▆▇▉ 5 . 谜
性药网评论文章：

海滨博客链接黑名单

◎欢迎参与讨论，请在这里发表您的看法、交流您的观点。真的真的，口碑好且靠谱的卖春药的商家终于找到了一. 春药天堂网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 二. 春药阁平台入口《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 三. 春药阁平台《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 四. 春药销售网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 五.春药阁中药材采购网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 六. 春药阁中药批发网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 回答1：北京春药阁官网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 回答2：春娇阁官网入口《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 回答3：网站春药《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 回答4：春药阁官方中药材采购网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 回答5：春药阁官网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 回答6：春药商城直播平台《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 答案1. 春药平台 a p p 《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 答案2 平台卖春药骗术《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 答案3. 日本春药商城《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ 答案4. 春香阁平台下载《认
性药网评论文章：

为了保护网友的眼睛海滨博客全站换为微软雅黑字体

8. 春药平台 a p p 下载安卓《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁ 9. 春药货到付款 a p p 下载安卓《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁ 1. 春药网 a p p 下载安装安卓《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁ 2. 春药喷雾正规厂家安卓《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁ ▇▇▇▇▇▇ 方案6.女生发情视频网站《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇ 方案7.情药网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇ 方案8.发情药女《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇方案3.药店女生发情药网站《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇方案4.美女xxx网站《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇方案5.成人春药网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案9.春药商城官网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇ 方案10.福建同春药厂官网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇ 性药哪儿有？性药在哪儿可以买到？性药分享强烈推荐：▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇ 方案1.青蛇春药堂官网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇ 方案2.春药网店官网《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉ ▇▇▇▇▇▇
性药网评论文章：

网页中运行其它html代码详解

▇▇▇▇▇▇ 方案3.日本春药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案4.91 成人淫药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案5.91 成人淫药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案3.日本春药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案4.91 成人淫药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案5.成人春药网《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案6.正品进口春药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案7.色春药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案8.情药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案9.春药商城网《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案10.女生发情药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇春药哪儿卖？性药官网首页 - 性药销售渠道 - 春药 2 4 小时在线服务▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇方案1.发情药网站《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇方
性药网评论文章：

一个不错的网站整站下载器强烈推荐

▇▇▇▇▇▇ 方案5.成人春药网《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案6.正品进口春药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案7.色春药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案8.情药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案9.春药商城网《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇ 方案10.女生发情药商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇春药哪儿卖？性药官网首页 - 性药销售渠道 - 春药 2 4 小时在线服务▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇方案1.发情药网站《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇方案2.发情药商城《认准网站 a k a k 4 7 . c o m》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇春药哪里有卖的？在哪能买到？春药性药▇▇▇▇▇▇ ▇▇▇▇▇▇行业国内认可的春药商城尽在 a k a k 4 7 . c o m ▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇7.春药 24 小时在线商城《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇8.淫药商城具体方案！《认准网站 a k a k 4 7 . c o m 》其他广告全是骗子▁▂▃▄▅▆▇▉▇▇▇▇▇▇ ▇▇▇▇▇▇9.淫药春药性药 a p p 商城官网基地下载《认准网站 a

标签列表

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

“100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全” 的相关文章

css高度自适应

解决IE浏览器不支持min-height 的问题

div中英文无法自动换行的解决方法

鼠标放上去点击图片

纯div+Css下拉菜单

父级div height:auto无效解决办法

评论列表

发表评论

海海日记-冯海滨博客

一个心高气傲，永远开拓的人。

Powered By Z-BlogPHP. Theme by TOYEAN.

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

“100% width CSS 在 iPad / iPhone Safari 背景被截断 / 显示不全” 的相关文章

css高度自适应

解决IE浏览器不支持min-height 的问题

div中英文无法自动换行的解决方法

鼠标放上去点击图片

纯div+Css下拉菜单

父级div height:auto无效解决办法

评论列表

发表评论取消回复

海海日记-冯海滨博客

一个心高气傲，永远开拓的人。

Powered By Z-BlogPHP. Theme by TOYEAN.

发表评论