视口不起作用答案

【问题标题】：Viewport does not work视口不起作用
【发布时间】：2020-08-08 20:00:29
【问题描述】：

我正在尝试在移动设备上正确扩展我的网站，但是当我使用视口元标记时，它什么也不做。

我的设计大约是 500 像素宽（我不希望它缩小，所以如果用户宽度低于 500 像素，我希望网站“缩小”直到整个设计适合页面）所以最好我会想做这样的事情：

<meta name="viewport" content="width=500">

或：

<meta name="viewport" content="width=device-width; height=device-height" />

即使我尝试更改值，也没有任何反应，就像它根本不起作用一样。

我能做什么？

【问题讨论】：

您在哪些移动设备和浏览器上进行测试？什么版本的操作系统？什么版本的浏览器？
如果没有显示问题所需的示例标记，我们所说的任何内容都只会是一个疯狂的猜测，但设置视口的宽度是一件独特的事情。 stackoverflow.com/help/mcve
我没有收到您的问题，您希望您的网站页面正确缩放并适合移动视图，还是希望在移动视图中查看整个页面。--@osk

【解决方案1】：

如果我对您的理解正确，您希望页面缩放到视口而不是响应式的（即看起来与在更大的设备上相同，但显示得更小）。在这种情况下，只需删除所有视口元标记 - 移动设备会自动进行缩放。

【讨论】：

【解决方案2】：

尝试使用：

meta http-equiv='viewport' content='width=device-width, initial-scale=1.0'

并避免使用：

height=device-height

因为：当 size 已经声明为用户屏幕尺寸时，我们不需要再次声明高度。在这种情况下，纵横比（尤其是图像）会改变。它们可能会拉伸或挤压。

【讨论】：