网页在iphone上显示的一些问题

最近编写了一个网站,后期调试时使用了firefox、safari、google chrome、IE等浏览器测试,一切正常。

然而在用iphone打开网页时发现了一些问题:

1. 页面上的字体大小并没有随着网页的缩小而缩小。

  查询资料后得知,那是因为iphone的safari有一个默认的设置会调整网页字体的大小,在某些情况下,就可能导致页面布局完全混乱。

该设置为:

-webkit-text-size-adjust

根据apple的文档说明,该设置是css的style,通过设置其百分比,对网页上的字体进行调整。

而目前我不需要这个功能,因此直接将其置为none就行了。具体写法是:
在需要禁止调整字体大小的地方,在style里加入: -webkit-text-size-adjust: none;
而同时我认为用这个设置应该也可以自由地控制iphone上网页显示的字体大小。
2. iphone所谓的viewport设置的无效。
  iphone在很多关于web page文档里都提到,可以使用viewport使网页缩放到iphone或ipad所支持的宽度和高度。
  然而,经本人实际使用发现,该方法只能在网页body的宽度小于iphone屏幕宽度的时候有效,如果网页本身宽度大于iphone屏幕宽度,那么除了期待iphone自动为你将网页缩小以外,没有任何事可做。期待今后iphone能够加强viewport的功能。
原文地址:https://www.cnblogs.com/eagley/p/1794381.html