我这辈子都弄不明白为什么 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 viewport 标签，我非常肯定我已经正确实现了它:
<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 的移动 View 。在大多数情况下都不好.. 而是安装 plugin适用于 Chrome，可帮助您。
关于html - 如何在手机上使用最小宽度？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58783504/