html5 - H5分辨率适配时,猎豹、UC浏览器以及webview缩放不正常
高洛峰
高洛峰 2017-04-17 13:26:50
0
3
455

在对H5页面做分辨率适配的时候,采用动态设置meta标签中缩放属性initial-scale=1/dpr的方法,

var dpr = window.devicePixelRatio;
dpr = dpr >= 3 ? 3 : ( dpr >=2 ? 2 : 1 );
var meta = document.querySelector('meta[name="viewport"]'); 
var deviceWidth = doc.documentElement.clientWidth || window.innerWidth; 
meta.setAttribute('content', 'width=device-width initial-scale=' + 1/dpr + ' maximum-
scale=' + 1/dpr + ' minimum-scale=' + 1/dpr + ' user-scalable=no');

采用iphone6 750*1334设计稿写css宽高,在大部分浏览器中能正确缩小,得到想要的效果:

而猎豹浏览器失效,表现为initial-scale=1(理想结果为1/2或1/3):

但加上target-densitydpi=device-dpi之后:

meta.setAttribute('content', 'width=device-width initial-scale=' + 1/dpr + ' maximum-scale=' + 1/dpr + ' minimum-scale=' + 1/dpr + ' user-scalable=no target-densitydpi=device-dpi');

猎豹浏览器正常,UC浏览器反而失效,表现为:

同时,将页面嵌入webview时,ios浏览器显示正常,而Andriod所有浏览器都不能正确缩小,表现为:

查了很多资料也没能解决这个问题,很是疑惑,希望得到大神指点。

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

모든 응답(3)
洪涛

Andriod webview 中好像是设置 webview.getSettings().setUseWideViewPort(true);
找 Andriod 端的同学问问吧。

Peter_Zhu

你单位是用的rem么

洪涛

我只想知道,自适应为什么要这么复杂…

최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!