Question

＆＃34;我对编码很陌生，而且我无法为移动设备调整网站大小。该网站适用于桌面设备，除了某种方式它在移动设备上无法检测到设备宽度，因此该网站一直延伸，我不得不四处移动滚动条。＆＃34;

这个问题已经回答了！如果你有类似的问题，

有媒体查询：

<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

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

console.log(window.outerWidth)

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

x * (100vw/window.outerWidth)

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

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

Answer 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 */
}

}

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

2 个答案: