html - 居中 iFrame 的问题

Question

我正在嵌入一个我用 FlipHTML5 创建的数字目录，我想让它更适合移动设备。我添加了以下 CSS:

.size {
width: 85vw;
height: 75vh;

因为在 iframe 标签中设置宽度/高度不能很好地转换为移动设备。现在有了这个，事情在移动设备(手机和 ipad)上正确显示，但我留下了 iframe 在桌面上偏离中心。我尝试将 iframe 设置为居中对齐，尝试将 iframe 置于居中的

标记内，尝试将 iframe 置于居中，但都存在相同的问题。除非我在 CSS 中将宽度降低到 60vw 左右，否则我在左侧留下了很大的边距，但随后它在移动设备上显示得太薄了。有没有我遗漏的东西或为移动设备设置不同大小的 CSS 的方法？

Answer 1

更改我的 CSS 以使用媒体查询:

@media (min-width : 1024px) {
.size {
    width: 65vw;
    height: 75vh;
}
}

@media (max-width : 1024px) {

    .size {
        width: 85vw;
        height: 75vh;
}
}

这似乎解决了它在桌面上的外观问题，同时在移动设备上仍显示正确的尺寸。看起来整个 wordpress 网站没有居中 - iframe 与我们左侧的 Logo 对齐，当您重新调整窗口时，整个左侧边距变得比右侧大，使页面偏离右侧中心。奇怪