首頁  >  問答  >  主體

html5 - H5分辨率适配时,猎豹、UC浏览器以及webview缩放不正常

在对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所有浏览器都不能正确缩小,表现为:

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

高洛峰高洛峰2717 天前457

全部回覆(3)我來回復

  • PHP中文网

    PHP中文网2017-04-17 13:28:50

    Andriod webview 中好像是設定 webview.getSettings().setUseWideViewPort(true);
    找 Andriod 端的同學問問吧。

    回覆
    0
  • 天蓬老师

    天蓬老师2017-04-17 13:28:50

    你單位是用的rem麼

    回覆
    0
  • PHP中文网

    PHP中文网2017-04-17 13:28:50

    我只想知道,自適應為什麼要這麼複雜…

    回覆
    0
  • 取消回覆