如何避免放大背景图像

我们可以通过使用元标记视口来缩放背景图像。我有背景图像，我可以很好地放大/缩小该图像，但我在背景图像（文本和按钮）上还有一些东西，当我缩放背景图像时，按钮和文本也会缩放，但我不想用视口比例缩放它们。是否可以通过使用视口缩放来避免某些特定元素的缩放？这是我的 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>

我已经尝试通过给出位置：固定和背景附件：固定但不起作用。请任何人帮助解决这个问题。这两天我被困住了。提前致谢

将

viewport标签更改为以下标签：

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

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

希望有帮助。

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

相关内容

最新更新

热门标签：