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 时代,有一个通杀所有浏 ...
随机推荐
- Fluent动网格【11】：弹簧光顺
动网格除了前面讲了很多的关于运动指定之外,另一个重要主题则为网格的更新. 在部件运动之后,不可避免的会造成网格形状的变化,如若不对网格加以控制,在持续运动的过程中,则可能造成网格极度变形.歪曲率过大, ...
- 常用xpath选择器和css选择器总结
xpath选择器 表达式 说明 article 选取所有article元素的所有子节点 /article 选取根元素article article/a 选取所有属于article的子元素的a元素 // ...
- 【转】使用minizip解压缩多个文件（基于zlib）
原帖子:使用minizip解压缩多个文件(基于zlib) 写作目的:之前在网上看到很多人在寻找可以解压缩多个文件的程序,其中有尝试zlib的,使用zlib的源码可以生成后缀为点gz的压缩文件,但是一次 ...
- js实现根据文本下标位置添加特殊标识
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- vim几种常用的插入模式
我们来看一下cw这个命令,它是从光标处替换到后一个单词的结尾.比如说我的光标如图: 我的namespace写错了,后面的都对,就可以用cw命令,
- [C++]Qt程式异常崩溃处理技巧(Win)
文章转载来自 http://www.cnblogs.com/lcchuguo/p/5177715.html 作者 lcchuguo https://blog.csdn.net/baid ...
- Linux常用的基础组件
Linux服务器(新机器) yum install gcc gcc-c++ glibc-devel make ncurses-devel openssl-devel autoconf git yum ...
- Elasticsearch学习笔记——常用命令
1.创建一个名字为index的topic curl -XPUT http://localhost:9200/index 2.创建一个mapping curl -XPOST http://localho ...
- Ubuntu系统监控indicator-sysmonitor
参考: http://www.cnblogs.com/EasonJim/p/7130171.html 安装indicator-sysmonitor sudo add-apt-repository pp ...
- Linux下 编译lib3ds库
从网上下载的一个QT程序链接需要用到lib3ds.a静态库. lib3ds is an overall software library for managing 3D-Studio Release ...