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

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）。

可以吗？

笨蛋：

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

和演示：

为什么我有滚动条？我需要以某种方式缩小它，这样我就不会在那里有任何滚动条...... 我的容器应该是 640px 并且没有其他移动设备的值...

Answer 1

使用 HTML5 缩放属性如下所示。这会将主体缩放到 + 或 -。可以使用任何值。

<body style="zoom:50%;">

Answer 2

您可以使用 HTML5 缩放：

body {
    -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
    zoom: 0.8; /* Other non-webkit browsers */
    zoom: 80%; /* Webkit browsers */
}

有关受支持的浏览器，请参阅 http://www.browsersupport.net/CSS/zoom。

那么你可以写一个JS函数来选择正确的缩放量。

Answer 3

尝试

Zoom:0.5;

不使用 % 值或者设置

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

Answer 4

这是我用于所有响应式 Web 应用程序的内容。

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

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

Correct using of mobile viewport on different devices with small width

html

javascript

css

mobile

media-queries