问

html - 微信 meta name="viewport" 兼容问题

唱歌好好听i 发布于 2022-11-04 20:56

text

如上代码，使页面限制成640px宽度，但是在有的设备上是失效的，有的是高度好像没跟着缩小~
求解

4 个回答

content=”width=device-width，让其自适应足矣，不知道为何要你那么做

2022-11-08 15:45 回答

dendfengg_566
<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = (phoneWidth/640);

var viewport = document.querySelector("meta[name=viewport]");
if(isWeixin()){
```
viewport.setAttribute('content', 'width=640, initial-scale = '+phoneScale+', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+',  target-densitydpi=device-dpi');
```
}else{
```
viewport.setAttribute('content', 'width=640');
window.setTimeout(function(){
    viewport.setAttribute('content', 'width=640');
},1000);
```
}
function isWeixin(){
```
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
    return true;
} else {
    return false;
}
```
}
</script>

最近新找到的解决方法，有效。但其兼容性还需要再测测，基本主流机型是没出现问题
2022-11-08 15:50 回答

广药中山校区艺术团啦啦队

var width;
if(window.orientation===undefined){
  width = screen.width;
}else{
  if(window.orientation==0){
    width=Math.min(screen.width,screen.height);
  }else{
    width=Math.max(screen.width,screen.height);
  }
}
var scale = width / 640;
document.write('<meta name="viewport" content="width=device-width,initial-scale=" + scale + ",maximum-scale=" + scale + ",minimum-scale=" + scale + ",user-scalable=no">');

2022-11-08 16:00 回答

疯务情堂

这样设置<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>，让其自适应

2022-11-08 16:01 回答

rukal2502900501_324

撰写答案

今天，你开发时遇到什么问题呢？

立即提问

热门标签