浏览器内核 不同 清晰 CSS 工作量 分辨 转换成 如果
在开发一个含有二维码的微信页面时,我遇到了这样一个问题:使用 iPhone 第一次进入该页面时,二维码可以长按识别,但第二次进入时长按无法识别到二维码。安卓机都能识别。
图 1
图 2 阶段性结论:二维码能被长按识别,但因为某种原因识别区域发生了偏移。
在网上简单搜索了偏移问题后,我注意到一条关于 <meta> 标签的,大意如下:
meta 标签定义了默认缩放为一倍就能识别,不定义就不能识别。于是我将原来的
- name="viewport" content="target-densitydpi=device-dpi, user-scalable=no">
改成了
- name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">
虽然样式飞了但二维码识别正常了。看来问题就出在这里了。经过尝试,我发现:target-densitydpi=device-dpi 和 width=device-width 是冲突的。加上后者二维码识别正常了,但样式肯定要重新定义,若不加,样式好使,但二维码识别就不正常了。定义样式是小事,但归根结底,发生偏移的原因到底在哪呢?
UI 设计人员都知道因为 pc 和移动设备屏幕密度像素的不同在输出视觉稿的时候要标明空间的倍数大小,[email protected]
来源: http://www.bubuko.com/infodetail-2081861.html