Question

我们可以使用元标记视口缩放背景图像。我有背景图像，我可以非常好地放大/缩小图像但我在背景图像（文本和按钮）上有更多的东西，当我缩放背景图像然后按钮和文本也变得缩放但我不想用视口尺度缩放它们。这是否可以通过使用视口缩放来避免某些特定元素的缩放？这是我的HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=yes, initial-scale=0.5, maximum scale=1.5,
minimum-scale=1, width=device-width, height=device height,
target-densitydpi=device-dpi" />

 <style>
 #maincontent {
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 50;
 }

 #score {
margin: 0 0 0 0;
right: 0px;
top: 0px;
z-index: 50;
position: fixed;
 }

 #scoreCount {

font-size: 100%;
 }
#countdown{
font-size: 100%;

  }
 #reset{
margin: 0 0 0 0;
left: 0px;
top: 0px;
z-index: 50;
position: fixed;

 } 


  </style>

  </head>
  <body>

<img alt="Loading" id="background" />
<div id="maincontent">
<div id="score">
        <p id="scoreCount">
            <b></b>
        </p>
        <p id="countdown">Time Limit</p>
    </div>
    <div id="reset">
    <button onclick="reset()">Reset</button>
    </div>

</div>

  </body>
  </html>

我试过给位置：固定和背景附件：固定但不工作。请任何人帮忙解决这个问题。最近两天我被困住了。提前致谢

Answer 1

将您的viewport标记更改为此标记：

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

您的代码在初始比例与最大比例之间存在差异，因此可以使用缩放。请注意，在我的建议中，所有值都是相同的。

希望有所帮助。

Answer 2

根据@Gal V，我也在这个主题上搜索了更多。 “这是否可以通过使用视口缩放来避免某些特定元素的缩放？”。根据我的研究，我们不能（我不确定100％）通过使用元标记视图端口缩放来避免某些特定元素进行缩放。不知道答案是否正确。如果有人知道回答它。

如何避免缩放背景图像？

2 个答案: