使用媒体查询如何使网站在移动设备上变得更大

Question

5

我的网站：点击

如何在移动设备上增大网站？我想要更大的标志和其他元素。但是，zoom属性在iPhone上不起作用，因为我在CSS中加入了它：

@media screen and (max-width: 767px) {
    body {
        zoom: 150%;
        -moz-transform: scale(1.5);
    }
}

- abcdefghi

3

哦，天哪！我不认为那是个好主意。你可能正在寻找类似于<meta name="viewport" content="width=device-width, initial-scale=1">这样的东西吗？ - Joseph Marikle

将视口设置为@JosephMarikle所说的那样，然后取消前缀transform:scale(1.5)（或者根据你要针对多旧的系统而定，可能是-webkit-transform）。 - pawel

2个回答

-1

首先设置您的视口

<meta name="viewport" content="user-scalable=yes, minimum-scale=0.75, maximum-scale=3.0" />

写入缩放类似

zoom: 1.8;

- Beep

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Roy · Accepted Answer

对于网站来说，缩放并不是一个好主意。尝试在您的<head>中添加以下内容，并在Mozilla开发者网络了解更多有关viewport元标记的信息。

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui">