viewport 最佳实践

[mishe]

初始化，默认设置750的宽度，根据设计稿来就好了，现在一般的设计标准是750或1500

<meta id="vp" name="viewport" content="width=750,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">

附加上一小段JS，

 var w1=Math.min(window.innerWidth,screen.width*window.devicePixelRatio),scale=w1/750*0.5;
        document.getElementById('vp').content='width=750,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';

这样就收工了，页面完全可以按照固定宽度750的尺寸来进行开发，无需顾忌任何屏幕尺寸的变化。

[mishe]

手机实测，浏览器，微信，安卓和iOS的webview中，表现一致，可以进行生产开发。

[agileago]

http://jerryzou.com/posts/design-for-all-mobile-resolution/

[mishe]

谢谢 @agileago 我的主题和该文章还是有区别的，我这个可以解决1px 边框等问题。 同时，缩放也不依赖target-densitydpi，因为这个属性在webview中是无效的，2012年就不支持了。

[Naeemo]

看起来挺好的，明天试试。

[mishe]

发现在chrome的模拟器中会偶发的出错，因此JS代码需要修改为：

var w1=Math.min(window.innerWidth,screen.width*window.devicePixelRatio),scale=w1/750*0.5;
        document.getElementById('vp').content='width=750,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';

[mishe]

另外在模拟器上，开发全图片的活动页发现一个问题，上下2张图片之间有一个淡淡的线，原因是图片经过缩放后，高度不是整数，在手机上没有问题。

[agileago]

这是我现在生产环境中的处理代码,设计图虽然是750的，但我一般都会把它缩小到375就是正常的宽度来做，1px我用css处理的1px解决方案

<meta name="viewport" content="width=375, user-scalable=no">

// 设置低版本安卓的viewport
function setAndroidViewPort(designWidth) {
  function setViewPort () {
    var match
    var scale
    var TARGET_WIDTH = designWidth || 375

    if (match = navigator.userAgent.match(/Android (\d+\.\d+)/)) {
      if (parseFloat(match[1]) < 4.4) {
        if (TARGET_WIDTH == 320) TARGET_WIDTH++
        var scale = window.screen.width / TARGET_WIDTH
        document
          .querySelector('meta[name="viewport"]')
          .setAttribute('content', 'width=' + TARGET_WIDTH + ',initial-scale=' + scale + ',target-densitydpi=device-dpi,user-scalable=no')
      }
    }
  }
  setViewPort()
  window.addEventListener('orientationchange', setViewPort)
}

[mishe]

你的方案在内嵌APP的时候不会有问题吗？target-densitydpi=device-dpi早在2012年就不支持了

[mishe]

链接个人发在稀土的https://gold.xitu.io/post/58a51a9e2f301e006d85aab3

[agileago]

2012年不支持什么意思？支持不支持难道不是根据系统带的浏览器情况么？跟年份有什么关系？这个只是对低版本的viewport做兼容，高版本根本无需设置scale,浏览器自己会做适应，目前没发现有用户报页面显示有问题

[mishe]

浏览器是会自动缩放，但webview不会啊

[mishe]

今天发现安卓webview里面，该设置不生效，经过测试，发现只要把js移植到onload中就可以了。

[mishe]

用以下代码代替html meta标签

        var w1=Math.min(window.innerWidth,screen.width),scale=w1/750*0.5;
//        console.log(window.innerWidth,screen.width)
        document.write('<meta id="vp" name="viewport" content="width=750,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no">')

[tangcaiyue]

你这个onload方法解决了我的问题 非常感谢