元视口属性不使网页适合设备的宽度

Question

我正在接受关于使网站响应的Udacity课程，我尝试在非响应式网站上应用<meta name="viewport" content="width=device-width, initial-scale=1.0">。结果是该页面没有尝试适合设备的宽度。我误解了什么吗？

Answer 1

你的html页面可能有一个包装容器，其宽度以像素为单位。 <meta name="viewport" content="width=device-width, initial-scale=1.0">不会使您的网页响应，而是影响比率大小，即字体将呈现。

尝试给容器宽度100%并从那里开始。

Answer 2

页面的一部分似乎包含一个表格。很可能表格根本不适合可用宽度，迫使页面溢出设备，可以这么说。

它也可能是任何其他元素，其固定宽度太高或由于其他原因无法缩放以适合可用宽度，例如white-space: nowrap的文本。如果没有看到更多的代码，就无法分辨。

Answer 3

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

你应该试试这个。

Answer 4

更改开发工具中的比率。现在，它是2.将其更改为1.