最近在开发一个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浏览器会弹出显示所需要的缩放比,但是仍然没有按照需求缩放。
【相关推荐】
YDUI Touch专为移动端打造,在技术实现、交互设计上兼容主流移动设备,保证代码轻、性能高;使用 Flexbox 技术,灵活自如地对齐、收缩、扩展元素,轻松搞定移动页面布局;用 rem 实现强大的屏幕适配布局,等比例适配所有屏幕;自定义Javascript组件、Less文件、Less变量,定制一份属于自己的YDUI。
1. 特别推荐:“php程序员工具箱”V0.1版本下载
2. 分享viewport属性解决移动端竖屏切横屏字体被重置的问题实例









