网站不会适应移动宽度/元标记？答案

【问题标题】：Site won't adjust to mobile width/meta tag?网站不会适应移动宽度/元标记？
【发布时间】：2020-07-07 10:24:20
【问题描述】：

“我是编码新手，在为移动设备调整网站大小时遇到问题。该网站适用于桌面设备，并且一切都已设置好，只是在移动设备上它无法检测到设备宽度，所以网站一直延伸，我不得不用滚动条四处移动。”

这个问题已经回答了！如果你也遇到过类似的问题，

有一个媒体查询：

<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css/mobile.css"/>

并且已经尝试过：

检查添加用户可缩放或最大比例是否会使任何
区别
为 html 和 body 标签添加设置的宽度或高度
删除边距
将所有内容都向左浮动
删除溢出
删除重置
试验最小和最大宽度
使用 vh 代替 %

下面有答案！

这里还有一个tutorial 用于移动优化，我用作参考。

【问题讨论】：

如果将user-scalable=no 添加到视口元内容会发生什么？ (<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">)
我会失去你的样式表的条件。尝试一起删除那里的媒体属性。如果您需要特定屏幕尺寸的规则，请使用 css 中的媒体查询w3schools.com/cssref/css3_pr_mediaquery.asp
我无法缩小，但网站仍然不适合宽度；;是的！也有人向我指出了媒体属性——我将编辑帖子
所以你想让整个网站也适应大屏幕的屏幕宽度？
不，仅适用于移动设备。

标签： html css mobile width

【解决方案1】：

您说您使用vh 对其进行扩展，但它不起作用。我不确定为什么会发生这种情况（我假设这是因为网站的高度总是根据其中的内容量而变化）。我认为更好的解决方案就是使用vw 或“视口宽度”。这是一个很好的解决方案，它在我正在开发的网站上效果很好。 注意：如果有水平滚动条可能不起作用。只需找到设备的宽度（以像素为单位）。试试：

console.log(window.outerWidth)

然后，只需使用以下公式将页面上的所有px 转换为vw，将 x 像素转换为该单位：

x * (100vw/window.outerWidth)

注意 2： 这不是您在代码中输入的内容。只需使用方程式，计算计算器上的数字，然后将该页面上的所有单位替换为 vw。

无论如何，希望这会有所帮助！

【讨论】：

【解决方案2】：

您的<body> 仍然有一个min-width，这会阻止它缩小到屏幕大小。

我添加了一些规则以使其适合：

@media screen and (max-width: 480px){

body{
min-width: 0;   /* let the body shrink */
}

#copyright{
margin-left: 0px;
}

#ladder{
width: 100%;   /* have the screen dictate the image size */
height: auto;
margin-left: 0;
padding: 10px;    /* still use padding... */
box-sizing: border-box;   /* ...but make it go on the inside */
}

}

【讨论】：

在媒体查询中添加了缺少的括号
添加最小宽度有效！我现在明白了——谢谢你，也感谢你进行其他修复！！会相应调整=)
好吧，实际上我们删除了 min-width。之前有一个（1280px；在 style.css 中，第 49 行），我们通过将其设置为 0 来消除限制。很高兴我能提供帮助 :)