扫二维码与项目经理沟通
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流
在网站建设开发过程中,现在很多时候都是需要做移动端,而常用的做法就是先写好统一的功能,然后依次做PC端和移动端(当然也可能同步进行)。而在移动端开发的时候,如果PC版已经做好了,而移动端没有完全做好的时候;很多朋友会遇到一个这样的问题:在ios下的safari浏览器,打开移动页面的一个超链接,然后再返回的时候,发现a标签中的文本突然变大,而且是时有时无的。如下图:
一开始很多人看到这现象肯定会怀疑是自己的代码出问题了,比如闭合问题等等;甚至尝试把a标签的字号给加上important也是无济于事。而在google上搜索的该问题的时候,出来的结果给开发者用的却很少,而有一些提出来的都是ios设备的用户提出来的,也就是说这个问题似乎并不是开发人员所关注的,而是ios本身的问题。
通过大量测试发现,不管是安卓设备还是ios设备上的其他浏览器均不存在这样的问题。而到底为什么时有时无呢?这里我们微构网络团队通过反复测试,得出以下基本结论(不一定完全正确,但目前还没发现该结论的问题),该结论为:
当使用ios设备的safari浏览器访问移动端页面,如果某两个以上a标签为兄弟节点(这个条件非常重要),且至少一个连接到了没有viewport属性页面(比如传统PC版网页,测试用的是工信部备案查询站点),那么其父节点下的所有a标签中的文本都会在返回时字体变大。
实际上,可以进一步看到,其实这种不正常的页面恰恰是当这个移动端页面没有加viewport属性时显示的大小。我觉得这问题几乎可以肯定是ios下safari浏览器的bug,大概就是访问没有viewport属性的页面(如传统PC版网页),返回后的这个节点的效果相当于这个页面没有加viewport属性。而暂时的解决方法就是:尽量在移动端避免指向到非移动端页面,至少指向本站的不要这样,何况这样的用户体验确实不好;而到底有没有从根本上强制覆盖该bug还有待探索。
我们在微信上24小时期待你的声音
解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流