调试iphone上html,如何调试 iPhone Safari 浏览器的CSS兼容问题
我们电脑浏览器如果出现CSS兼容问题,现在很好解决,Chrome浏览器自带检查工具,火狐浏览器的FireBug也很好用,Safari、360、 IE、EDGE都有自己的调试工具。他们可以查看html+JS+CSS如何被解释的,如果被解释错了可以看到原因出现在哪。
但是以上说的都是电脑,如果网站在iPhone上出现了兼容问题,该如何解决呢?下面教大家个方法,需要Mac电脑和iPhone。
以这个网站为例,现象如下:
网站在PC,Mac,安卓手机上均无问题,在iPhone 的 Safari 上出现了黑色背景,只能平铺30%,有的Banner宽度也只有30%。(iPhone6,iPhone6 plus,iPhone5S,iPhone5都有问题,iPhone3GS,还有iPad mini2 无问题)
分析方法:用Mac 的Safari浏览器,菜单中的“开发”,数据线链接iPhone,类似“检查”或firebug之类的方法,在Mac Safari中出现代码样式,在iPhone的Safari中出现选择的区块。这样容易辨别是哪块出现了问题,揭示出什么样的代码,便于查找问题原因。
备注:同样的html+css,在不同设备和不同浏览器上 解释不同,显示效果也不同。
发现DIV显示宽度页面的30%,但是子DIV内容却是100%,显然子没有撑开父DIV,clear both无效。
考虑宽度的问题,网上搜索原因,原来iPhone的Safari默认宽度是980px,需要指定html的viewport宽度,否则会按照默认980px处理。
解决方案:最简单的方法是在 head 标签中初始化好 viewport,详见下方代码:
假设网页宽度为 960px 或 1080px,可在width中加入该值,并将 initial-scale 设置一个适合的倍数值。
例如一个页面的宽度为 1080px,则设定为:
这样不管加载前后切换横屏还是竖屏,都可以友好显示。
我们用的是:
以上只是一个案例,但是这个方法还是挺重要的,希望对朋友提供帮助。
【责任编辑:51CTO_OS TEL:(010)68476606】
点赞 0
调试iphone上html,如何调试 iPhone Safari 浏览器的CSS兼容问题相关推荐
- iPhone上编辑html,在iphone上重新格式化一个简单的html页面
我有一个名为today.html的html,我在我的 iphone上使用它,我必须放大查看我的任务如何才能正确格式化,以便我在iphone上的屏幕上扭曲,文本大小合适 这是我的代码 /p> &q ...
- iphone怎么添加计算机,如何在iPhone上设置铃声? iPhone如何使用iTunes添加铃声?...
尽管Apple的手机是封闭系统,但无法使用文件夹进行管理畅无线苹果版,也无法直接自定义铃声. 如果您有用户,则不会放弃. 我内心一直在重复一个问题. 如何为手机设置铃声?我搜索了信息,得知苹果的手机无 ...
- iphone计算机照片大小,如何在iPhone上调整照片尺寸-缩小照片以缩小
如果您想将iPhone用作微型相机拍照,则照片必须占据iPhone的大部分存储空间. 这是一个难题: 要备份到计算机上以腾出空间来存放新的将来的照片,或将珍贵的照片保留在iPhone上,则需要定期查看 ...
- 媒体查询在iPhone iPod touch中使用safari浏览器失效的原因
在iphone和ipod touch中使用的Safari浏览器会出现媒体查询失效这是为什么呢 这是因为在iphone中使用Safari浏览器在进行页面显示时,将窗口宽度当做980px像素进行显示.所以 ...
- safari无法打开网页是什么原因?mac上的Safari浏览器打不开网页怎么办?
只要是MacOS系统的都会附带一个Safari浏览器,完美兼容Mac.PC 及 iPod touch.iPhone.iPad,功能和性能自然是不错的,但是也会出现如safari浏览器无法打开网页的情况 ...
- 360浏览器打不开网页_苹果移动端、PC端safari浏览器打不开网页的解决方案!
你还在为苹果自带的safari浏览器打不开网页而苦恼吗,接下来的答案会帮助你解决苦恼. 苹果自带safari浏览器的设备分为两种:移动端.PC端.因此不同设备出现safari浏览器打不开网页的情况需要 ...
- 在Windows上调试iPhone/iPad的safari浏览器
众所周知 在安卓上面可以使用adb链接电脑,使用Chrome Inspect进行调试网页(QQ/微信的x5内核也可以),但是自从换了iPhone之后就没有这个乐趣了,所以我便开始摸索起来如果使用Chr ...
- Windows系统的Chrome 调试运行在 IOS-safari (iPad/iPhone)上的页面
1 安装 iTunes Windows 系统首先要安装 iTunes ,打开 Apple 官网下载 iTunes 并完成 iTunes 安装,否则计算机无法正确识别 iPhone 设备. 2 iOS设 ...
- vmware虚拟机mac连接iphone调试safari浏览器
原文链接: https://dsx2016.com/?p=1001 微信公众号:大师兄2016 USB控制器 首先要明确一点,vm虚拟机的mac是可以连接iphone调试的. 选中mac系统,打开配置 ...
最新文章
- HTC One 802w(联通双卡版本)刷机过程(只是记录大概的过程,网上已经有各步骤的详细过程)...
- python正态检验_Python检验数据是否正态分布
- sqoop导入-hdfs
- 【线上直播】LiveVideoStack Meet | 长沙:多媒体与广电
- 回归素材(part2)--机器学习与R语言
- PVLAN技术初探-巧用PVLAN优化网络
- python discuz验证码_Python3简单验证码识别
- Win7 下 VS2005 不能断点调试解决办法
- 脚本工具之下载M3U8文件类型的完整视频
- 我国数学如何面对西方数学?
- 期货日内交易如何判断方向
- 【ORACLE】关于多态表函数PTF(Polymorphic Table Functions)的使用
- matplotlib实现区域颜色填充
- 2017年网易有数用户定位和产品能力
- 三相全控tc787触发电路_开关电源常用的几种保护电路
- 淘宝人群拖价怎么做? 大神导航,一个神奇的网站,从此开启大神之路!
- 【八】【vlc-android】vlc-vout视频流输出端源码分析
- Linux TCP之sack(一)
- Unity3D优化总结
- k8s技术预研13--kubernetes共享存储原理与动态存储供应用使用示例