网站不会调整移动宽度/元标签？
网站不会调整移动宽度/元标签？
提问于 2016-02-03 13:50:41
“我对编码很陌生，而且我很难为移动设备调整我的站点大小。这个网站在桌面上正常工作，所有的东西都设置好了，除非它在移动时检测不到设备的宽度，所以网站会一直延伸，所以我不得不在滚动条上移动。”
这个问题已经回答了！如果你有类似的问题，
有一个媒体查询：
<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而不是%
下面有一个答案！
这里还有一个用于移动优化的教程，我将其作为参考。
回答 2
Stack Overflow用户
回答已采纳
发布于 2016-02-03 15:33:38
您的<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 */
}
}Stack Overflow用户
发布于 2020-07-07 02:24:20
你说你用vh来衡量它，但它不起作用。我不知道为什么会发生这种情况(我认为这是因为网站的高度总是会根据网站内容的数量而变化)。我认为更好的解决方案是使用vw或“视口宽度”。这是一个很好的解决方案，在我正在研究的网站上效果很好。注意:如果存在水平滚动条，可能无法工作。只要找到你的设备的宽度(以像素为单位)。尝试：
console.log(window.outerWidth)然后，使用下面的等式将页面上的所有px转换为vw，该等式将x像素转换为这个单位：
x * (100vw/window.outerWidth)注释2: --这不是您在代码中所放的内容。只需使用等式，在计算器上压缩数字，并将页面上的所有单元替换为vw。
不管怎样，希望这能帮上忙！
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35178915
复制相关文章
相似问题
腾讯云开发者
