Question

我创建了一个在桌面上适度缩放的网页，所有内容都是窗口高度或宽度的百分比。我不明白为什么网页没有缩放到手机屏幕的大小？这是我在托管网站上放置的网站，所以我可以在我的iPhone上测试它：

http://henryneilson.comli.com/Test/Index.html

可以在该链接上看到HTML

重要事项的CSS是：

@charset "utf-8";
body {
overflow-x: hidden;
overflow-y: hidden;
text-align: center;
margin: 0px;
height: 100vh;
top: 0px;
}
#FSBG {
width: 177.77vh;
height: 100%;
min-width: 400px;
min-height: 225px;
margin-left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
}
#BackgroudDiv {
height: 100%;
text-align: center;
display: block;
background-color: #161619;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
width: 3000px;
position: fixed;
left: 50%;
-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);
z-index: -100;
}
.titletext {
color: #fff;
text-shadow: 0px 6px 8px rgba(0, 0, 0, 1);
font-size: 5vh;
text-align: center;
position: absolute;
top: -3.7vh;
left: 2%;
z-index: 10;
font-family: source-sans-pro;
font-style: normal;
font-weight: 100;
}
.titlebox {
width: 100%;
height: 7vh;
display: block;
background-color: #161619;
margin: auto;
top: 0px;
left 0px;
position: absolute;
z-index: 10;
}

将浏览器扩展到与iPhone相同的分辨率并不会显示iPhone显示的内容（我希望iPhone能够显示桌面显示的内容），我是否遗漏了明显的东西？

非常感谢

ħ

Answer 1

尝试在HTML Head中添加此行：

<meta name="viewport" content="width=device-width, initial-scale=1">

Answer 2

我发现我没有使用所有三种类型的转换，所以对于chrome和Ie它工作但iPhone要求我使用所有三种：

-webkit-transform: translateX(-50%);
-ms-transform: translateX(-50%);
transform: translateX(-50%);

流动缩放网页未在移动设备上按预期缩放

2 个答案: