网站不会调整到移动 width/meta 标签？

Question

"I'm new to coding and I'm having trouble resizing my site for mobile devices. The website works okay for desktop, and everything's set except somehow it won't detect the device-width when on mobile, so the site stretches all the way, and I'd have to move around with the scrollbars."

此问题已得到解答！如果您遇到过类似的问题，

有一个媒体查询：

<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我用来做参考的移动优化。

Answer 1

您的 <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 */
}

}

Answer 2

你说你用 vh 来扩展它，但它没有用。我不确定为什么会这样（我假设这是因为网站的高度总是根据其中的内容量而变化）。我认为更好的解决方案是使用 vw 或“视口宽度”。这是一个很好的解决方案，并且在我正在处理的网站上运行良好。 注意：如果有水平滚动条，可能无法使用。只需以像素为单位找到设备的宽度。尝试：

console.log(window.outerWidth)

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

x * (100vw/window.outerWidth)

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

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

网站不会调整到移动 width/meta 标签？

Site won't adjust to mobile width/meta tag?

html

css

mobile

width