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

【问题标题】：Correct using of mobile viewport on different devices with small width在不同宽度的设备上正确使用移动视口
【发布时间】：2016-03-27 06:23:49
【问题描述】：

我有这样的用于移动设备的 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：我应该将其扩大一点（因为网站对于 340 像素来说太大了（它；s min.640 像素））...如果 900：那么也扩大...

甚至是ipad（纵向模式，因为它的宽度是768px）。

可以吗？

plunker：

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

和演示：

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

【问题讨论】：

您是否尝试添加最大宽度和高度为 100% 的 css ？？
你在这里混合了两件事。一种是使用 css 响应式@media 查询和其他静态视口宽度来缩放网站。您到底想在最终结果中实现什么？拥有一个具有本机设备分辨率的响应式网页或根据设备宽度缩小整个页面？
@user151496 scale the whole page down depending on the device width，但最小宽度...

标签： javascript html css mobile media-queries

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

试试

Zoom:0.5;

不使用 % 值或者设置

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

【讨论】：

【解决方案3】：

您可以使用 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函数来选择正确的缩放量。

【讨论】：

但它有点“硬编码”...对于 iphone4 - 这很好，但对 ipad 不好;)
你是什么意思？您可以使用数学公式编写一个 JS 函数来选择我认为的正确缩放量。
它没有缩放它。您要求在着陆时缩小页面

【解决方案4】：

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

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

【讨论】：

但它有点“硬编码”...对于 iphone4 - 这很好，但对 ipad 不好;)
如果它已经对你有用，请将它标记为答案，因为它会定期出现在我的个人资料页面中。