2017-09-05 188 views
0

我想包括亞馬遜評論iframe,它不適合手機屏幕視圖。所以我正在使用比例來縮放內容。這是代碼:iframe縮放重疊按鈕

<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被故意留空。

回答

0

你有沒有想過的只是改變高度 下面的代碼:

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

優化移動與HTML實際上是很容易考慮整個頁面。 試試這個標籤

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

如果你可以包括從形象,也將有助於URL。 如果這有幫助,你能告訴我嗎?

+0

https://i.stack.imgur.com/JiuDR.jpg 我試過用元標記,仍然沒有工作 –