[我一辈子都无法找到min-width为什么无法在我的网站上使用移动设备。可能有一个非常基本的解决方案，但我什么也找不到。
基本上，我的CSS元素：
fullscreen {
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
position: absolute;
min-width: 100%;
min-height: 100%;
}
[在所有分辨率和宽高比下，它在桌面浏览器上均能完美工作，但在移动设备上它会完全崩溃，尽管当我将min-width更改为width时，它可以在桌面设备和移动设备上完美填满屏幕。
并且当我使用height而不是min-height时，它可以按预期工作，并且我可以在移动设备上使用bottom来定位元素，但是当使用min-height时，它会在屏幕中途使用一些任意位置。 max-width和max-height似乎也正常工作
对我来说，更奇怪的是，在Chrome上使用移动设备“模拟器”时，结果似乎是完全随机的，有时可以正常工作，有时将中途线路与我的实际手机放在同一位置，有时将其完全插入不同的地方。
我的电话始终在同一位置有中线。
[我见过很多人推荐使用meta视口标记，我很肯定我正确实现了它：
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
对我来说，理想的解决方案是简单地复制与在移动设备上的台式机相同的行为，因为我的台式机站点已经适用于所有分辨率。
非常感谢您的帮助，我已经花费了至少3个小时来尝试解决这一问题！
编辑：我尝试用JavaScript实现我想要的行为，由于某种原因，它仍然不希望在移动设备上工作。这是我进行的测试：
<!DOCTYPE html>
<html>
<head>
<title>Mobile fit test</title>
<meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1.0">
<style>
body {
margin: 0;
padding: 0;
overflow-x: hidden;
overflow-y: hidden;
}
</style>
</head>
<body>
<img id = "fit" src = 'http://placehold.it/1000'>
<script>
var image = document.getElementById("fit");
var image_width, image_height;
window.onresize = function() {
console.log(image_width, image_height);
var width = 1.0 / window.innerWidth * window.innerHeight / image_height * image_width;
var height = 1.0;
if (width < 1.0) {
width = 1.0;
height = 1.0 / window.innerHeight * window.innerWidth / image_width * image_height;
}
width *= window.innerWidth;
height *= window.innerHeight;
image.style.width = width + "px";
image.style.height = height + "px";
image.style.position = "absolute";
image.style.left = window.innerWidth / 2 - width / 2 + "px";
image.style.top = window.innerHeight / 2 - height / 2 + "px";
}
document.body.onload = function() {
image_width = image.width;
image_height = image.height;
window.onresize();
}
</script>
</body>
</html>
有了这个，我仍然可以缩放，window.innerWidth和window.innerHeight似乎不是它们应该的样子，并且在任何分辨率和Mileta Dulovic建议的插件下仍然可以完美地工作。这真让我发疯！
您的元标记看起来应该是正确的。如果您不希望用户放大页面，则可以使用此
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
好吧。媒体查询是这样的
@media screen and (min-width: 768px) {
...
}
CSS仅适用于具有width >= 768px的屏幕。在下面的屏幕上将不会应用。
@media screen and (max-width: 768px) {
...
}
CSS仅适用于具有width <= 768px的屏幕。在上方的屏幕上，它将不会应用。
如果我理解您的问题很好，那么在将min-width与媒体查询一起使用时，您会遇到问题。那是因为您永远不会告诉它在较小的屏幕上该怎么办。
[也不要对Chrome的移动视图过分相信。在大多数情况下，这不是很好。.而是为Chrome安装plugin可以帮助您解决此问题。