Iframe-Skalierung überschneidet sich mit einer Schaltfläche

Question

Ich versuche, Amazon Review Iframe einzuschließen, und es passt nicht in die mobile Bildschirmansicht. Also verwende ich eine Skala, um den Inhalt zu skalieren. Dies ist der Code:

<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

^^^^ Aber wenn ich versuche, es zu skalieren, es überlappt eine Schaltfläche, die ich in der Fußzeile haben, wie in der Abbildung dargestellt. Kann jemand helfen, dieses Problem zu beheben. PS: Src wird absichtlich leer gelassen.

Answer 1

Haben Sie jemals daran gedacht nur die Höhe zu ändern in dem folgenden Code:

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

Optimierung zu Mobile mit HTML eigentlich ziemlich einfach ist, eine ganze Seite betrachten. versuchen, diesen Tag

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

Wenn Sie die URL von diesem Bild enthalten können, die auch helfen würden. Können Sie mich wissen lassen, ob das hilft?