手机屏幕大小不同,分辨率也各不相同,手机上web页面很难有一种特定的尺寸去开发,而后又能适配所有机型,今天遇到一系列的调整,能够让web页适配性能提高很多,但兼容性未知,至少uc,QQ等一些都支持!
1.利用缩放,让web页面充满整个屏幕,不大不小。
按照较高的分辨率来开发,如:640的宽度。然后利用“document.body.style.zoom = window.screen.width / 640;”,进行大小缩放,适配屏幕大小。
这样会有一个问题,如果用户放大或者缩小,还是会让我们的工作白费。所以,这个时候我们需要第二步。
2.固定屏幕,禁止手机用户缩放。
1
|
< meta name = "viewport" content = "width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> |
html禁止手机页面放大缩小的代码放在head标签里面