safari手机浏览器的width:100%的自适应问题
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"/>
这样不管加载前后切换横屏还是竖屏，都可以友好显示。【可参考：股票配资 手机端与pc端的浏览对比 】
可是比如头部部分设置为width：100%，而网页中部最大宽度为默认：1200px，头部和中部长度不一致。这个问题在pc端和手机的默认像素不一致造成。该如和解决？
找了很多资料，终于找出来了：
在网页的<head>中增加以上这句话，可以让网页的宽度自动适应手机屏幕的宽度:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, user-scalable=yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="format-detection" content="telephone=no" />
第一行：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=0.5：表示最小的缩放比例
maximum-scale=2.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例
第二行：
设定iphone端页面全屏。
第三行：
取消数字被识别为电话号码。
如果是想要一打开网页，则自动以原始比例显示，并且不允许用户修改的话，则是：
<meta name="viewport" content="width=device-width（这里是可以变化的，根据你的其他div的宽度来设置）, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
这样子写后，就可以把一些页头横幅等的图片的宽度都设置成style="width:100%"，整个页面在设备上看起来就是全屏的了。【要把width=device-width 中的device-width换成你中部设置的像素值，比如我的设置为1200px】 这样问题就解决了。
亲测有用！解决了一个难题！！！
原文链接：https://blog.csdn.net/houerfei/article/details/42995901
safari手机浏览器的width:100%的自适应问题的更多相关文章
- 为什么全部width:100%浏览器边缘存在留白？
一般浏览器都给body加了外边距,margin:0应该能解决你所遇到的问题.但你很可能又会遇到其他奇怪的现象,比如说p的行高,在不同浏览器上显示不一致,最根本的解决方案还是重置浏览器默认样式. 可以使 ...
- 使用视 meta 标签来控制手机浏览器布局
移动浏览器的Fennec一样呈现在一个虚拟的"窗口"页面(视),通常比屏幕宽.所以他们不需要去挤每个页面布局到一个小窗口(这会破坏许多非移动优化的网站) .用户可以平移和缩放才能看 ...
- css3处理sprite背景图压缩来解决H5网页在手机浏览器下图标模糊的问题
近期在负责一个微信H5 App项目,遇到一个郁闷的问题,手机浏览器查看网页时图标都是模糊的,有锯齿,电脑浏览器显示则是正常.大概知道是分辨率适配等类型的问题,后来网上查找了一些办法.大部分的解决方式都 ...
- 手机浏览器通过Scheme跳转APP，兼容各种手机浏览器
一个比较完整的产品线,必定有APP和网站,另外还有微信公众号网页和小程序.那么有一个比较常见的需求就是在手机浏览器内打开APP,实现起来也比较简单,只要APP配置的有URLScheme即可. 但是因为 ...
- 【百度地图API】手机浏览器抓包工具及其使用方法
原文:[百度地图API]手机浏览器抓包工具及其使用方法 摘要:为了测试地图API在手机浏览器上的性能,需要给手机浏览器设置代理.通过代理,我们可以在PC上获取到抓包数据.进而对性能做进一步分析. -- ...
- html兼容手机浏览器
其实主要就是改掉HTML页面声明: 在网页中加入以下代码,就可以正常显示了: <meta name="viewport" content="width=device ...
- 手机端用swiper组件 轮播图设置后右侧出现空白 及 部分手机浏览器打开网页空白
我的方法是设置内容css overflow:hidden;width:100%; ok. 之前搜到一个方法也可以,就是设置css height: auto;overflow-y: scroll; 但是 ...
- JS复制内容到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
- JS实现复制到剪贴板(兼容FF/Chrome/Safari所有浏览器)
现在浏览器种类也越来越多,诸如 IE.Firefox.Chrome.Safari等等,因此现在要实现一个js复制内容到剪贴板的小功能就不是一件那么容易的事了. 在FLASH 9 时代,有一个通杀所有浏 ...
随机推荐
- Jupyter/JupyterLab安装使用
一.介绍 Jupyther notebook(曾经的Ipython notebook),是一个可以把代码.图像.注释.公式和作图集于一处,实现可读性及可视化分析的工具,支持多种编程语言.官方使用手册. ...
- Machine Learning第十一周笔记：photo OCR
博客已经迁移至Marcovaldo's blog (http://marcovaldong.github.io/) 刚刚完毕了Cousera上Machine Learning的最后一周课程.这周介绍了 ...
- 明天软软onsite
现在在飞机上,还有1.5小时到达.买了网络包,速度不错.今年上半年第三次飞西雅图,过几天也许还有第四次... 今天群主FB加面系统设计非常顺利,祝他拿到大包裹,也希望拿到以后发大红包,这回我一定不能错 ...
- PCL点云配准（3）
(1)关于点云的配准 1.首先给定源点云与目标点云. 2.提取特征确定对应点 3.估计匹配点对应的变换矩阵 4.应用变换矩阵到源点云到目标点云的变换 配准的流程图 通过特征点的匹配步骤 (1)计算源点 ...
- SpringBoot系统列 1 - HelloWorld！
学习SpringBoot系统列之HelloWorld! 1.新建一个Maven项目 2.添加POM配置 <parent> <groupId>org.springframewor ...
- sql 同步2个表中的一个字段数据
update PMS.tenant_contract a inner join(select id,home_id from PMS.owner_contract) c on a.id = c.id ...
- Fiddler抓包手机代理配置
参考链接:https://i.wanz.im/2013/04/30/debugging_http_request_with_fiddler/ http://www.hangge.com/blog/ca ...
- ganglia问题汇总
1.有数据,不出图 排查方法: 1)确保 php-gd 插件已安装 2) 确保rrdtool 的命令路径是正确的 3)确保php.ini中passthru函数是否开启,参数safe_mode 是否为o ...
- 【thinkphp5.1】 endroid/qrcode 二维码生成
composer 链接: https://packagist.org/packages/endroid/qrcode 注意:PHP版本 要求 7.1+ 1. 使用 composer 安装 endroi ...
- EgretPaper学习笔记一 （安装环境，新建项目）
参考: 官方Egret3D教程 白鹭引擎5.3.0正式发布,支持3D游戏开发 一 下载安装EgretPaper Egret3D 编辑器的开发代号为“Paper”,于2018年9月份开始小规模内测,并在 ...