Hi all,
最近在开发一个mobile网站,在使用viewport
的时候遇到了一些问题.
多番尝试之后,现在的情况是UC, Chrome, Android自带的browser, safari都可以如愿按缩放比显示.
但是在用户量巨大的QQ浏览器中,发现似乎不能识别(或者说不能使用)viewport.
代码如下:
HTML
JavaScript
var viewPortScale; var dpr = window.devicePixelRatio; if(dpr <= 2) { viewPortScale = 1 / window.devicePixelRatio; } else { viewPortScale = 0.5 } document.getElementById('viewport').setAttribute( 'content', 'user-scalable=no, width=device-width, initial-scale=' + viewPortScale); // alert(viewPortScale);
如果去掉alert
的注释,QQ浏览器会弹出显示所需要的缩放比,但是仍然没有按照需求缩放。
不知道针对这种情况如何解决QQ浏览器的兼容性问题?
target-densitydpi=device-dpi 是以屏幕分辨率进行渲染,最新webkit内核已不支持该写法,可以用 width=1080代替,但这种写法也有好多坑。所以最推荐的写法应该是width=device-width,也就是以设备分辨率进行渲染,目前主流都是这种写法,但这样一来页面就没那么精致了。