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与我们左侧的徽标对齐，当您重新调整窗口时，整个左边距比右边大，使页面偏离中心向右。怪异

以iFrame为中心的问题

1 个答案: