0

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

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

4

2 回答 2

0

将您的viewport标签更改为此：

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

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

希望有帮助。

于 2013-10-22T05:42:02.293 回答
0

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

于 2013-10-22T08:05:37.317 回答