Question

我正在尝试添加Amazon Review iframe，但它并不适合移动屏幕视图。所以我使用scale来缩放内容。这是代码：

<div class="wrap"> 
  <iframe class="frame" src=""></iframe>
</div>
<style>
.wrap {
    width: 320px;
    height: 192px;
    padding: 0;
    overflow: hidden;
}
.frame {
    width: 1280px;
    height: 786px;
    border: 0;
    -ms-transform: scale(0.25);
    -moz-transform: scale(0.25);
    -o-transform: scale(0.25);
    -webkit-transform: scale(0.25);
    transform: scale(0.45);

    -ms-transform-origin: 0 0;
    -moz-transform-origin: 0 0;
    -o-transform-origin: 0 0;
    -webkit-transform-origin: 0 0;
    transform-origin: 0 0;
}
</style>

enter image description here

^^^^但是当我尝试缩放它时，它会重叠我在页脚中的按钮，如图所示。任何人都可以帮助解决这个问题。 PS：Src故意留空。

Answer 1

你有没有想到只是改变身高在以下代码中：

.frame {
width: 1280px;
height: 786px;

考虑到整个页面，使用HTML优化移动设备实际上非常简单。试试这个标签

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

如果您可以包含该图片中的URL，这也会有所帮助。如果这有帮助，你能告诉我吗？

iframe缩放重叠按钮

1 个答案: