變焦iFrame /沒有裁剪的物體

我想將iPhone模擬器從http://www.transmog.net嵌入我們自己的網站。我用這個表單很好地爲用戶填寫了URL，然後通過移動瀏覽器顯示用戶的網站。變焦iFrame /沒有裁剪的物體

但是，嵌入式模擬器對於我們的目的來說太大了，我們希望它更小。我目前正試圖通過將模擬器放在iFrame中並使用CSS來縮放/變換，或者做同樣的事情來實現這一點。然而，如果我縮小到50％，並且減小了模擬器的大小，它也只顯示50％，剩下的則是「裁剪」。

已經在這裏搜索，似乎無法找到我正在尋找的答案。

任何幫助將不勝感激！

感謝

來源

2013-02-21 Tom Smith

一個的jsfiddle將有很大的幫助 – abbood 2013-02-21 13:36:13

以前也從來沒有使用過的jsfiddle但已經把相關的信息在這裏：http://jsfiddle.net/3Hm29/1/ 它沒有運行，並且不能明白爲什麼，但你可以在這裏找到我的問題的鏈接： http://qsavvyrestaurants.com/sim/preview.html 前兩個「示例」是我試圖放大，底部是原始大小的版本。謝謝！ – 2013-02-21 13:43:00

一個jsfiddle應該有某種輸出..如果你使用圖像，你可以使用圖像託管網站將它們鏈接到你的jsfiddle ..你的沒有任何輸出 – abbood 2013-02-21 13:44:21

CSS將無法通過Iframe的級聯（除非他們是在同一個域中的主頁，並有seamless屬性） - 你必須實例你想任何技術裏面的iframe使其對其內容生效。令人遺憾的是，使用變身者的自定義設置看起來不太可能。

來源

2013-02-21 13:54:54 Barney

不一定只通過CSS來完成。無論如何，我基本上可以「縮小」框架的內容或類似框架的內容嗎？ – 2013-02-21 13:59:41

'zoom'是'transform'縮放內容的縮寫。從本質上講，這是非常多的CSS東西。但是我要指出的是，不同域名上的iframe不會允許你篡改他們的內容 - 不管是HTML，CSS還是JS - 所以即使存在例如用於縮放內容的HTML解決方案，它也不會不會幫助你，因爲呈現的內容在你的域名上被鎖定在你的代碼之外。這就是爲什麼你需要有限數量的配置設置才能通過：因爲沒有其他方式影響內容。 – Barney 2013-02-21 14:02:30

簡而言之，幀是一個壞主意 – abbood 2013-02-21 14:12:00

我會給一些指針併爲每個指針添加註釋。

有幾種選擇取決於你想投資多少錢來解決這個問題..但是，它又似乎是你的site的關鍵產品，所以我認爲值得花一些時間。

第一個選項：您創建一個SVG版本的iphone框架是什麼樣子：

，如果你不知道的SVG是什麼，它基本上是一個矢量圖形是當你放大和縮小時不會失去質量..想想它作爲這個屏幕上的文本..當你放大時，你看不到文本像素化嗎？）
你可以在一個div中包含svg並給它的CSS風格：position: relative。
在上面的div內，放入另一個div並將css樣式設置爲position:absolute，然後相對於父div給出它的左側和頂部x和y座標。
請勿使用px，而應使用ems。當你放大的像素是較難預測的輸入/輸出（放大和縮小，幾乎就像顯示在不同的屏幕分辨率內容..但讓我們不要成）

第二個選項：使用位

類似於上面的一個..但不是使用iPhone的SVG描繪..你可以只使用一個位圖..然後將其設置爲背景，幾乎用同樣的方法如上..
這個解決方案的問題是，隨着用戶放大和縮小..你會看到一些圖像質量損失（我已經可以看到它與你...放大500％，你會看到邊緣像素化（即看起來粗糙的邊緣））。再次，如果這是我的網站，我會努力使它看起來不錯。 HTML5爲您提供了實現這一目標所需的全部功能。

定選項：從I幀遠離..這是一個非常困難的選擇和它的好處並不適用於您的情況。

來源

2013-02-21 14:00:22 abbood

變焦iFrame /沒有裁剪的物體

回答

相關問題