Question

我正在尝试在Windows 7中更改Chrome浏览器的视口宽度。我还想使用True更改缩放比例。我使用了以下代码，但没有任何反应，

initial-scale

我尝试将宽度更改为<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=400px", initial-scale=5.0"> <style> .box { box-sizing: border-box; padding:10px; border: 2px dotted black; background-color: cyan; } </style> </head> <body> <div class="box"> Hello World </div> </body> </html>，50％，50em等，但视口无法更改。我也给device-width提供了不同的值，但没有发生任何事情。

我错过了什么？

Answer 1

试试这个

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

也将css更改为

.box {
        box-sizing: border-box;
        padding: 10px;
        border: 2px dotted black;
        background-color: cyan;
        max-width: 100%;
        height: auto;
    }

您可以使用此网站在任何设备上进行测试 http://responsivetest.net/#u=http://www.zootemplate.com|1024|768|1

视口标签应该如何工作？

1 个答案: