Question

在我的实验中，元视口width = device-width似乎没有任何区别。我做了一个测试页，向您展示：

我的主要代码是：

body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    font-size: 16px;
    background: yellow;
}

.test_box {
    background: red;
    width: 360px;
    height: 50px;
}

.test_image {
    width: 16rem;
}

h1 {
    margin: 0;
    padding: 0;
    font-size: 4rem;
    line-height: 6rem;
}

p {
    margin: 0;
    padding: 0;
    font-size: 2rem;
    line-height: 2rem;
}

<!DOCTYPE html>
<head>
    <title> My Project </title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="/CSS/styles.css">
</head>

<body>
    <div class="test_box"></div>
    <img src="/IMG/ham.svg" alt="image" class="test_image">
    <h1>Header</h1>
    <p>Paragraph</p>
</body>
</html>

当我在桌面上调整窗口大小时，它会按照应有的方式运行。

但是当我将其上传到服务器并在Huawei p9 lite上看到它时，它不合适。我是否放置了视口元标记。它什么都不会改变！

（请参见图片中的this shm_open manual，1920px wide，然后是360px wide。您还可以看到mydevice.io将我的设备重新标识为on my mobile, either with the viewport meta tag or not）

我该怎么办？请帮我。非常感谢你！

Answer 1

这是因为您正在域wido.media上对其进行检查，并且该域不包含任何元标记。

要进行检查，请在PC浏览器中打开wido.media，然后通过右键单击>查看页面源或按@ViewChildren(DataTableDirective) dtElements: QueryList<DataTableDirective>; // ... searchByCoid(term: string): void { this.dtElements.forEach((dtElement: DataTableDirective) => { dtElement.dtInstance.then((dtInstance: DataTables.Api) => {dtInstance.destroy();}); }); }

查看源

并且wido.media在Ctrl+u和iframe中打开http://www.henriquevieira.com此域包含视口元标记，因此，如果您在移动设备中打开henriquevieira.com，则可以看到区别< / p>

Answer 2

视口是用户在网页上的可见区域。视口随设备而异，并且在移动电话上会比在计算机屏幕上小。在平板电脑和手机之前，网页仅设计用于计算机屏幕，并且网页具有静态设计和固定大小是很常见的。然后，当我们开始使用平板电脑和手机上网时，固定大小的网页太大，无法容纳视口。要解决此问题，这些设备上的浏览器会按比例缩小整个网页以适合屏幕大小。这不是完美的！但是快速解决。

Answer 3

您被mydevice.io“骗了”-如果向下滚动该网站，您会注意到一个叫CSS pixel-ratio的东西，在您的情况下为3。

Here's an explanation of the pixel ratio

因此，您的设备的宽度仅为360px以上

视口元标记没有任何区别

3 个答案: