Html 我的网站在手机上打开时显示为放大

头

在手机上打开“我的网站”时，显示为放大状态

---

如何修复？

初始缩放=1.0

告诉浏览器将缩放级别设置为正常（即不放大或缩小）。您只需要

宽度=1000

：

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

---

初始比例=1.0

告诉浏览器将缩放级别设置为正常（即未放大或缩小）。您只需要

宽度=1000

：

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

---

您正在将

机身的宽度设置为比手机屏幕宽（因为您的视口标记导致“px”单位不是1:1，所以手机上的1个像素与1个px单位不对应）。您应该为
正文
样式使用相对值

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

或者为小于420px的设备创建一个额外的
@media
查询，如下所示：

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

编辑：

下面是另一种使用动态视口标记的方法：

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


window.onload=函数（）{
如果（屏幕宽度<420）{
var viewport=document.getElementById（'viewport'）；
setAttribute（'content'，'width=420，initial scale=1'）；
}
}
您正在将
机身的宽度设置为比手机屏幕宽（因为您的视口标记导致“px”单位不是1:1，所以手机上的1个像素与1个px单位不对应）。您应该为
正文
样式使用相对值

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

或者为小于420px的设备创建一个额外的
@media
查询，如下所示：

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

编辑：

下面是另一种使用动态视口标记的方法：

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


window.onload=函数（）{
如果（屏幕宽度<420）{
var viewport=document.getElementById（'viewport'）；
setAttribute（'content'，'width=420，initial scale=1'）；
}
}
如果可能，请共享您的站点链接。@MuhammetSönmezalp当我查看时一切正常。你确定没有（在Chrome emulator中）双击手机屏幕吗？我没有。如果可能的话，请共享您的站点链接。@MuhammetSönmezalp当我查看时一切正常。你确定没有（在Chrome emulator中）双击手机屏幕吗？我没有。当页面加载时，请稍后缩小并刷新rezoom Int，这不是OP所要求的。这会导致低于标准，也会导致不一致的移动体验，因为根据屏幕大小，文本可能看起来太小而无法阅读
width=device width
旨在使文本在任何屏幕上都可读。这不是OP所要求的。这会导致低于标准，而且移动体验也不一致，因为根据屏幕大小，文本可能看起来太小而无法读取
width=device width
旨在使文本在任何屏幕上都可读。这将非常困难，因为我的所有内容都是为420px设置的，然后您可以将视口标记更改为
。如果你想让你的网站在所有屏幕上都好看，你应该尝试让你的内容在任何宽度上工作。我在我的答案中添加了一个带有动态视口标记的方法。这将非常困难。我想，我的所有内容都是为你准备的，然后你可以将视口标记更改为
。如果你想让你的网站在所有屏幕上都好看，你应该尝试让你的内容在任何宽度上工作。我在回答中添加了一个带有动态视口标记的方法。