关于viewport兼容性问题的实例代码
程序员文章站
2022-03-25 22:09:02
...
最近在开发一个mobile网站,在使用viewport
的时候遇到了一些问题.
多番尝试之后,现在的情况是UC, Chrome, Android自带的browser, safari都可以如愿按缩放比显示.
但是在用户量巨大的QQ浏览器中,发现似乎不能识别(或者说不能使用)viewport.
代码如下:
HTML
<meta id="viewport" content=" target-densitydpi=device-dpi, user-scalable=no, width=device-width, initial-scale=0.5" name="viewport" />
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浏览器会弹出显示所需要的缩放比,但是仍然没有按照需求缩放。
【相关推荐】
1. 特别推荐:“php程序员工具箱”V0.1版本下载
2. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例
3. viewport专题:深入理解css中响应式 Web 设计-viewport
以上就是关于viewport兼容性问题的实例代码的详细内容,更多请关注其它相关文章!
上一篇: 适配各种尺寸的设备的实现