我的网站在 phone 上打开时显示为放大

Question

头

<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;}

我的网站在 phone
上打开时显示为放大 Screenshots is here
我该如何解决？

Answer 1

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

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

Answer 2

您正在将 body 的宽度设置为比 phone 的屏幕宽（因为您的视口标签导致 "px" 单位不是 1:1所以 phone 上的 1 个像素不对应于 1 个像素单位）。您应该为 body 风格

使用相对值

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

或者像这样为小于 420 像素的设备创建一个额外的 @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>

我的网站在 phone 上打开时显示为放大

My site appears zoomed in when opened on the phone

html

css

media

viewport

responsive