最近编写了一个网站,后期调试时使用了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的功能。