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

Question

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

8

我有这样的针对移动设备的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来说太大了（最小为640px））...如果是900：那么也要缩放...

即使是iPad（在纵向模式下，因为其宽度为768px）。

这可能吗？

plunker：

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

和演示：

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

- brabertaser19

你尝试添加一个最大宽度和高度为100%的CSS了吗？ - Masnad Nihit

你在这里混淆了两件事情。一方面是使用CSS响应式@media查询，另一方面是使用静态视口宽度来缩放网站。你到底想在最终结果中实现什么？是拥有一个具有本机设备分辨率的响应式网页，还是根据设备宽度缩小整个页面？ - user151496

@user151496 根据设备宽度缩小整个页面的比例，但要考虑最小宽度... - brabertaser19

4个回答

1

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

- Anne Douwe

但它有点“硬编码”...对于iPhone4来说很好，但对于iPad来说不好;) - brabertaser19

你是怎么想的？我认为你可以编写一个带有数学公式的JS函数来选择正确的缩放量。 - Anne Douwe

它没有进行缩放。您要求在着陆页面缩小页面。 - Anne Douwe

1

尝试。

Zoom:0.5;

不使用百分数值或设置

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

- Sagar V

1

这是我用于所有响应式Web应用程序的工具。

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

- Jeff Diederiks

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Sagar V · Accepted Answer

使用如下所示的HTML5缩放属性。这将使页面放大或缩小。任何值都可以使用。

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