Question

HEAD

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

CSS

@media (max-width: 600px){
body{position: absolute; top: 0px; left: 0px; width: 420px;}

我的网站在手机上打开时会放大 Screenshots is here
我该如何解决？

Answer 1

initial-scale=1.0告诉浏览器将缩放级别设置为正常（即不放大或缩小）。您只需要width=1000：

<meta name="viewport" content="width=1000">

Answer 2

您要将body的宽度设置为比手机屏幕宽（因为您的视口标记导致＆＃34; px＆＃34;单位不是1：1所以手机上的1个像素并不对应1个像素单位）。您应该使用body样式的相对值

@media (max-width: 600px){
    body{
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 100vw;
        max-width: 420px;
    }
}

或为类似于420px的设备创建额外的@media查询：

@media (min-width: 420px) and (max-width: 600px){
    body{
        position: absolute; 
        top: 0; 
        left: 0; 
        width: 420px;
    }
}

@media (max-width: 420px){
    body{
        position: absolute; 
        top: 0; 
        left: 0; 
        right: 0;
    }
}

编辑：

这是另一种带有动态视口标记的方法：

<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<script>
window.onload = function() {
    if(screen.width < 420){
        var viewport = document.getElementById('viewport');
        viewport.setAttribute('content', 'width=420, initial-scale=1');
    }
}
</script>

在手机上打开时，我的网站会放大

2 个答案: