在宽度较小的不同设备上正确使用移动视口

Question

我有移动设备的css代码:

@media all and (min-width: 0px) and (max-width: 991px) {...}

我有这样的HTML:

<meta name="viewport" content="width=1024, initial-scale=1" id="viewportMt">

<script>
  window.onload = function () {
    if(screen.width < 970) {
      var vp = document.getElementById('viewportMt');
      vp.setAttribute('content','width=640, initial-scale=1');
    }
  }
</script>

主要的问题是,当我第一次打开我的网站时:在大多数设备上,我必须扩展我的浏览器视图以适应它...

可以自动安装设备吗？例如,如果设备宽度为340:我应该将其缩小一点(因为网站大到340px(它; s min.640px))...如果900:那么缩放...

甚至是ipad(在纵向模式下,因为它的宽度是768px).

有可能吗？

plunker:

https://plnkr.co/edit/5KhIlmtLkWhtROs7y188?p=preview

和演示:

为什么我有滚动条？我需要以某种方式将其缩小,以便我不会在那里有任何滚动条......我的容器应该是640px而没有移动设备的其他值...

Answer 1

这就是我所有响应式网络应用程序所使用的。

<meta name="viewport" content="width=device-width, initial-scale=1">