首页 > 经验 > 关键词 > 网站搭建最新资讯 > 正文

如何调试 iPhone Safari 浏览器 的CSS兼容问题

2016-09-18 11:45 · 稿源:分享建站经验的网站

我们电脑浏览器如果出现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,详见下方代码:

<metaname=”viewport”content=”width=网页真实宽度, initial-scale=倍数值”/>

假设网页宽度为 960px 或 1080px,可在width中加入该值,并将 initial-scale 设置一个适合的倍数值。

例如一个页面的宽度为 1080px,则设定为:

<metaname=”viewport”content=”width=1080, initial-scale=0.9″/>

这样不管加载前后切换横屏还是竖屏,都可以友好显示。

我们用的是:<meta name=”viewport” content=”width=1100″ />

以上只是一个案例,但是这个方法还是挺重要的,希望对朋友提供帮助。

  • 相关推荐
  • 大家在看
  • YouTube网站重新提供面向iOS 14画中画的兼容性

    YouTube周四恢复了对苹果iOS14 画中画功能的兼容,这将可以让所有用户从他们的移动版浏览器最小化内容然后查阅其它信息。本月早些时候,YouTube做出了一个有争议的改动,将PiP功能限制在YouTube Premium用户范围。

  • 零信任产业标准工作组发起兼容性认证计划,打造行业互联互通标准

    9 月 24 日,零信任产业标准工作组(以下简称工作组)在腾讯北京总部大楼召开研讨会,发起零信任产品兼容性认证计划,呼吁加强零信任产品间的技术兼容和互联互通,以解决不同厂商间产品互操性差、复用率低等问题,助力产业标准化、规范化发展。天融信、绿盟科技、蔷薇灵动、中国移动设计院、国家互联网应急中心、中孚信息、完美世界、亚数信息、芯盾时代、联软科技、数蓬科技、上海观安、公安三所、腾讯等 14 家单位参与发起该计划

  • 英伟达发布CUDA 11.1工具包:支持RTX 30系显卡 改善版本兼容性

    英伟达刚刚发布了 CUDA Toolkit 的 11.1 版本,主要引入了对本月新发布的 GeForce RTX 30 系列显卡的支持。其实七月份发布的 11.0 版本,该工具包就已经带来了对 Ampere GPU 的初步支持。随着 11.1 版本的到来,CUDA Toolkit 为消费级的 Ampere GPU 提供了更好的支持。

  • LG将推新固件 修复OLED电视与RTX 30系显卡的HDMI 2.1兼容性问题

    ​英伟达在本月发布的 GeForce RTX 30 系列显卡上引入了对 HDMI 2.1 的支持,想要在大屏电视上体验 4K @ 120Hz G-Sync 的玩家们对此也是充满了期待。遗憾的是,即便你有幸抢购到了一块 RTX 30 系列显卡,也可能无法完美兼容 2019 / 2020 款的 LG OLED 电视。当你在启用 G-Sync 的情况下设置 4K @ 120Hz 时,只会看到黑屏的界面。

  • Win10 v1903/1909更新后出现兼容性问题:微软证实

    作为Windows 10系统目前最稳定的两个版本,Version 1903/1909更新后也出现了幺蛾子,微软已经证实了。微软悄然更新了 Windows 10 Version 1903/1909 功能更新的支持文档,在“已知问题&r

  • 索尼PS5确认向下兼容几乎全部PS4游戏除了这十款

    根据索尼官方此前公布的消息,全新的索尼PS5游戏主机将于11月12日全球发售,目前距离发售仅有1个月的时间了,众多PS老用户对新机在游戏上的兼容性也更加关注。现在有最新消息,近日索尼官方最新确认,PS5可兼容运行几乎全部4000多款PS4平台游戏,尽管极少数为遇到一些功能或者稳定性BUG。据索尼官方最新发布的消息,与此前曝光的消息基本一致,全新的索尼PS5可兼容运行几乎全部4000多款PS4平台游戏,不过索尼提醒,如果

  • ColorOS 11 发布:三大特性全面提升,兼容更多老机型

    9 月 24 日,全新 ColorOS 11 于 OPPO 开发者大会正式发布。秉承「创造无边界」的理念,ColorOS 11 着力于个性化创造、无缝感体验、感官级畅快三方面的提升,通过无限息屏、闪达窗口、防卡顿引擎等功能,在超过 1000 项体验优化下,将人、设备、场景进行有机共融,为用户带来更加丰富精彩、多端互融、安全便捷的全场景体验。大会上,OPPO 副总裁吴恒刚也宣布了 ColorOS 月活用户数超过 3.7 亿,ColorOS 将继续面向全球用户提供服务

  • 麒麟OS宣布兼容中望CAD:国内第一款Linux版自主CAD软件

    在Linux内核的系统上,日常使用的软件基本不是问题,麻烦的是一些专业软件,生产力跟不上是限制Linux的重要因素。今天国内的麒麟OS开发商中标软件宣布完成中望CAD的认证,这是国内首款Linux下的

  • Analogue明年将推出时尚复古的游戏机Duo 目标是兼容TurboGrafx系列游戏

    在发布了漂亮的NES、SNES和世嘉创世纪的售后版本之后,Analogue现在又把目光投向了NEC的老牌硬件库。今天该公司推出了AnalogueDuo,这是一款支持TurboGrafx-16、PCEngine、SuperGrafx、TurboGrafxCD、PCEngineCD-ROM和SuperArcadeCD-ROM等大量硬件的游戏机。它计划于2021年推出,售价199.99美元。

  • 和平精英ss11赛季什么时候开始 ss11赛季具体上线日期时间

    和平精英目前还是在SS10赛季中,但是不少玩家已经在期待下一个SS11赛季了,很多玩家还不清楚S11赛季什么时候开始,下面就来为大家详细的介绍一下。

  • realme 7系列有望首发125W快充:兼容多种快充协议

    近年来,智能手机的快充水准迎来了飞速发展,从最开始的18W快充,逐渐发展到如今已经正式商用的120W,充电时间也有此前的2个小时迅速缩短到30分钟,国产手机厂商在此方面的进步可谓巨大。现在有最新消息,近日,有外媒透露称realme新品将配备125W的电源适配器。据外媒最新发布的消息显示,realme印度和欧洲CEO MadhavSthth近日在推特表示他们正计划推出全新的realme 7系列机型,包括realme 7和realme 7 Pro两个版本,并

  • 和平精英SS10赛季手册奖励内容汇总 SS10赛季手册全部内容一览

    和平精英在10月13日上线了SS10赛季的赛季手册,很多玩家还不清楚这次的赛季手册的奖励内容是什么,下面就来为大家详细的介绍一下。

  • RHFITNESS任和参展第38届体博会,诚邀您的莅临

    2020 年 9 月 28 日,第 38 届中国国际体育用品博览会(以下简称“ 2020 体博会”)将在国家会展中心(上海)举行。本届体博会是疫情防控工作进入常态化后国内举办的首场综合性国际体育用品展会,吸引了超过 1000 家企业共聚上海。 RHFITNESS任和品牌将携带旗下多款智能跑步机、走步机,参展本届体博会,为观展人员带来更智能、澎湃的健身体验。升级机型、智能触控……汇聚各类智能特色新品。 RHFITNESS任和品牌定位于中高端家用运动?

  • 索尼确认:PS5可向下兼容几乎全部4000款PS4游戏、除了这十款

    日前,索尼出面确认,PS4可兼容运行几乎全部4000多款PS4平台游戏,尽管极少数为遇到一些功能或者稳定性BUG。索尼还比较良心地给出建议,如果打算在PS5上为PS4游戏买DLC或者其它付费服务,请一

  • 索尼PS5兼容99% PS4游戏:PS4光盘版还可升级数字版

    上周索尼官方正式公布了全新的PS5游戏主机的价格,其中数字版售价399美元、蓝光版售价499美元,目前索尼PS5主机已经开启预购,并将于11月12日全球发售,值得注意的是这一售价与微软全新的Xbox Series X的价格相同,预示着新一代主机大战即将拉开了帷幕。而每逢新主机降临,众多玩家除了售价和上市时间外最关心的话题就是新旧主机和游戏的兼容性了。据索尼官方最新发布的消息显示,与此前曝光的消息基本一致,全新的索尼

  • 长安CS55 PLUS新增车型售9.29万元起:发动机热效率达40%

    9月23日消息,长安汽车官方宣布,旗下紧凑型SUV——CS55 PLUS蓝鲸版新增3款车型,提供手动和自动可选,售价区间为9.29-11.39万元。CS55 PLUS蓝鲸版可以看做是CS75 PLUS的缩小版,

  • Bluehost SSD VPS主机真实详细评测数据

    VPS主机其价格优势相对独立服务器来说是非常有吸引力的,很多站长一般都会将VPS主机作为建站的首选,尤其是外贸行业,站群推广行业。虚拟主机可能在权限方面没有VPS主机高,独立IP配置可能也相对来说比较少,这也导致VPS主机成为了主流的建站空间。那么我们在选择VPS主机时,应该要考虑哪些因素呢?本文针对VPS主机做一个详细的评测,主要选择的产品是Bluehost SSD VPS云主机,下面具体分析。1、价格外贸行业目前压力也比较大,尤?

  • 玖富受邀香港银行学会(HKIB)和香港电脑学会(HKCS) 主持网络研讨会

    2020年9月14日,玖富集团受香港银行学会(HKIB)和香港电脑学会(HKCS)邀请,参与主题为“虚拟银行如何在传统银行模式下突围而出”的网络研讨会。玖富集团、玖富国际董事总经理陈颖峰为活动进行全程主持。本次网络研讨会由香港银行学会(HKIB)和香港电脑学会(HKCS)在香港举办,围绕“虚拟银行如何在传统银行模式下突围而出”的主题展开线上研讨,分享了虚拟银行如何在金融科技时代满足客户需求,如何在不断探索的商业模式中保持灵活性?

  • 苹果中国应用商店下架RSS阅读器应用

    据外媒报道,苹果正在从中国区应用商店中下架的两款RSS阅读器应用,分别为Fiery Feeds 和 Reeder ,以遵守旨在阻止非法内容的有关规定。

  • 《自然》子刊发表金斯瑞cPass™ sVNT Kit重要数据

    日前,全球著名科学杂志《自然》子刊Nature Biotechnology上发表了一篇重大技术创新发明论文。该文章领衔通讯作者是美国杜克大学医学院和新加坡国立大学Duke-NUS联合新发传染病研究所主任、全球领先的病毒传染病研究科学家王林发教授。凭借国际领先的蛋白和抗体试剂研发能力,金斯瑞已与王林发教授团队达成全球商业化合作,并从Duke-NUS获得全球独家性商业授权,还为王教授在研究阶段提供了所有重要的试验试剂,论文中对金斯瑞全球

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签