xvno / blog

个人博客, 不定期发布技术笔记和个人随笔.
0 stars 0 forks source link

HTML: JS: meta-viewport #147

Open xvno opened 2 years ago

xvno commented 2 years ago

Refs

xvno commented 2 years ago

Sample

解决小屏设备显示不全, 当宽度小于某个阈值650时, 使用默认最大宽度1200

      // 解决小屏设备显示不全, 当宽度小于某个阈值650时, 使用默认最大宽度1200
      const contents = [ 'initial-scale=1.0', 'maximum-scale=3', 'minimum-scale=0.5' ]
      const meta = document.createElement('meta');
      meta.name = 'viewport';
      if (window.outerWidth < 650) {
        console.log('narrow: ', window.innerWidth);
        contents.unshift('width=1200');
      } else {
        contents.unshift('width=device-width');
      }
      meta.content = contents.join(',');
      document.getElementsByTagName('head')[ 0 ].appendChild(meta);