@ lxs, Tidak sama sekali. Saya menyukainya, dan memberinya +1. Kerja bagus.
Jonathan M
7
Saya perhatikan bahwa pada chrome saya mendapatkan zoom dan transformasi webkit yang diterapkan yang menyebabkan skala diterapkan dua kali.
dennisjtaylor
1
seperti @dennisjtaylor mengatakan, chrome tampaknya menerapkan skala dua kali - seperti yang terlihat di sini jsfiddle.net/zjTBq/embedded/result
Horse
3
Karena semua browser modern telah mendukung transformasi untuk beberapa waktu, saya akan mempertimbangkan untuk menggunakan versi yang tidak diperbaiki (setidaknya sebagai alternatif).
berjalan
55
Saya menemukan solusi yang berfungsi di IE dan Firefox (setidaknya pada versi saat ini). Di Safari / Chrome, iframe diubah ukurannya menjadi 75% dari ukuran aslinya, tetapi konten di dalam iframe tidak diskalakan sama sekali. Di Opera, ini sepertinya tidak berhasil. Ini terasa agak esoteris, jadi jika ada cara yang lebih baik untuk melakukannya saya akan menerima saran.
<style>#wrap {width:600px;height:390px;padding:0;overflow: hidden;}#frame {width:800px;height:520px;border:1px solid black;}#frame {zoom:0.75;-moz-transform: scale(0.75);-moz-transform-origin:00;}</style>
...
<p>Some text before the frame</p><divid="wrap"><iframeid="frame"src="test2.html"></iframe></div><p>Some text after the frame</p></body>
Catatan: Saya harus menggunakan wrapelemen untuk Firefox. Untuk beberapa alasan, di Firefox saat Anda menurunkan skala objek hingga 75%, ia masih menggunakan ukuran asli gambar untuk alasan tata letak. (Coba hapus div dari kode contoh di atas dan Anda akan melihat apa yang saya maksud.)
Saya baru saja menguji dan bagi saya, tidak ada solusi lain yang berfungsi. Saya hanya mencoba ini dan itu bekerja dengan sempurna di Firefox dan Chrome, seperti yang saya harapkan:
Anda juga ingin menambahkan overflow: hidden;ke .wrapelemen. Saat Anda menggunakan iframe { width: 200%; height: 200%; transform: scale(0.5); }iframe mulai meluap.
ozgrozer
Ini adalah pendekatan mutakhir. Terima kasih!
fuggi
10
Tindak lanjuti jawaban lxs : Saya melihat ada masalah di mana memiliki tag zoomdan --webkit-transformsekaligus tampaknya membingungkan Chrome (versi 15.0.874.15) dengan melakukan efek zoom dua kali lipat. Saya dapat mengatasi masalah ini dengan menggantinya zoomdengan -ms-zoom(hanya ditargetkan pada IE), meninggalkan Chrome hanya untuk menggunakan --webkit-transformtag, dan hal itu sudah beres.
Anda tidak perlu membungkus iframe dengan tag tambahan. Pastikan Anda menambah lebar dan tinggi iframe dengan jumlah yang sama dengan menurunkan skala iframe.
misalnya untuk skala konten iframe hingga 80%:
#frame { /* Example size! */
height:400px;/* original height */
width:100%;/* original width */}#frame {
height:500px;/* new height (400 * (1/0.8) ) */
width:125%;/* new width (100 * (1/0.8) )*/
transform: scale(0.8);
transform-origin:00;}
Pada dasarnya, untuk mendapatkan ukuran iframe yang sama Anda perlu skala dimensi.
Itu akan menjadi 0,8 untuk 80%, tetapi itu adalah Microsoftisme eksklusif, jadi mungkin tidak cocok. Ini juga hanya akan berfungsi jika dokumen dimuat ke dalam bingkai dapat diedit, yang tidak mungkin.
Quentin
7
Saya pikir saya akan membagikan apa yang saya dapatkan, menggunakan banyak dari apa yang diberikan di atas. Saya belum memeriksa Chrome, tetapi berfungsi di IE, Firefox dan Safari, sejauh yang saya tahu.
Offset spesifik dan faktor zoom dalam contoh ini berfungsi untuk mengecilkan dan memusatkan dua situs web di iframe untuk tab Facebook (lebar 810px).
Dua situs yang digunakan adalah situs wordpress dan jaringan. Saya tidak terlalu baik dengan html, jadi ini mungkin bisa dilakukan lebih baik, tetapi hasilnya tampak bagus.
Jika Anda ingin iframe dan kontennya untuk menskala ketika jendela diubah ukurannya, Anda dapat mengatur yang berikut ini untuk acara pengubahan ukuran jendela serta acara iframe yang memuat.
Ini akan membuat iframe dan skala kontennya menjadi 100% lebar dari wrap div (atau berapa pun persen yang Anda inginkan). Sebagai bonus tambahan, Anda tidak perlu mengatur css dari frame ke nilai-nilai yang dikodekan karena semuanya akan diatur secara dinamis, Anda hanya perlu khawatir tentang bagaimana Anda ingin div pembungkus ditampilkan.
Saya sudah menguji ini dan berfungsi pada chrome, IE11, dan firefox.
Saya pikir Anda bisa melakukan ini dengan menghitung tinggi dan lebar yang Anda inginkan dengan javascript (via document.body.clientWidth dll) dan kemudian menyuntikkan iframe ke dalam HTML Anda seperti ini:
Maafkan ketidaktahuan saya tapi bukankah itu membuat iframe 80% dari halaman sumber, daripada memperkecil halaman sumber itu sendiri?
Phill Healey
3
Bagi Anda yang mengalami kesulitan menjalankan ini di IE, sebaiknya gunakan -ms-zoomseperti yang disarankan di bawah ini dan gunakan fungsi zoom pada #wrapdiv, bukan iframeid. Dalam pengalaman saya, dengan zoomfungsi mencoba skala div iframe dari#frame , itu akan skala ukuran iframe dan bukan konten di dalamnya (yang adalah apa yang Anda inginkan).
Terlihat seperti ini. Bekerja untuk saya di IE8, Chrome dan FF.
Solusi #wrap #frame berfungsi dengan baik, asalkan angka dalam #wrap adalah #frame dikalikan faktor skala. Ini hanya menunjukkan bagian bingkai yang diperkecil. Anda dapat melihatnya di sini untuk menurunkan situs web dan memasukkannya ke formulir seperti pinterest (dengan plugin woodmark jQuery):
Jangan lakukan ini. Dari developer.mozilla.org/en-US/docs/Web/CSS/zoom : "Fitur ini tidak standar dan tidak pada jalur standar. Jangan menggunakannya di situs produksi yang menghadap Web: itu tidak akan bekerja untuk setiap pengguna. Mungkin juga ada ketidakcocokan besar antara implementasi dan perilaku dapat berubah di masa depan. "
hackel
+1 Ini (memodifikasi konten iframe, bukan iframe itu sendiri) sepertinya ide yang lebih baik. Saya membutuhkan cara untuk memperkecil halaman dan menampilkannya sebagai pratinjau halaman itu dan pendekatan ini memecahkan masalah.
akinuri
@akinuri Ya persis seperti itulah saya menggunakannya. Saya telah melalui sejumlah solusi, tetapi ini tampaknya yang paling mudah. Saya baru saja mengulangi iframe dan menyusutkan semuanya untuk mendapatkan halaman thumbnail. Tidak diperlukan perubahan pada halaman anak.
Graham
1
Jika html Anda ditata dengan css, Anda mungkin dapat menautkan berbagai style sheet untuk ukuran yang berbeda.
Saya tidak berpikir HTML memiliki fungsi seperti itu. Satu-satunya hal yang dapat saya bayangkan akan melakukan trik adalah melakukan beberapa pemrosesan sisi server. Mungkin Anda bisa mendapatkan snapshot gambar dari halaman web yang ingin Anda layani, skala di server dan melayani ke klien. Ini akan menjadi halaman non-interaktif. (mungkin sebuah imagemap dapat memiliki tautan, tetapi tetap saja.)
Gagasan lain adalah memiliki komponen sisi server yang akan mengubah HTML. Bagian seperti fitur zoom firefox 2.0. ini tentu saja tidak zoom sempurna, tetapi lebih baik daripada tidak sama sekali.
Seperti yang saya katakan, saya ragu Anda bisa melakukannya.
Mungkin Anda bisa menskalakan setidaknya teks itu sendiri, dengan mengatur gaya font-size: 80%;.
Belum diuji, tidak yakin itu berfungsi, dan tidak akan mengubah ukuran kotak atau gambar.
Jawaban:
Solusi Kip harus bekerja pada Opera dan Safari jika Anda mengubah CSS ke:
Anda mungkin juga ingin menentukan overflow: disembunyikan di #frame untuk mencegah scrollbar.
sumber
Saya menemukan solusi yang berfungsi di IE dan Firefox (setidaknya pada versi saat ini). Di Safari / Chrome, iframe diubah ukurannya menjadi 75% dari ukuran aslinya, tetapi konten di dalam iframe tidak diskalakan sama sekali. Di Opera, ini sepertinya tidak berhasil. Ini terasa agak esoteris, jadi jika ada cara yang lebih baik untuk melakukannya saya akan menerima saran.
Catatan: Saya harus menggunakan
wrap
elemen untuk Firefox. Untuk beberapa alasan, di Firefox saat Anda menurunkan skala objek hingga 75%, ia masih menggunakan ukuran asli gambar untuk alasan tata letak. (Coba hapus div dari kode contoh di atas dan Anda akan melihat apa yang saya maksud.)Saya menemukan beberapa dari pertanyaan ini .
sumber
Setelah berjuang dengan ini selama berjam-jam mencoba membuatnya bekerja di IE8, 9, dan 10 inilah yang bekerja untuk saya.
CSS strip-down ini berfungsi di FF 26, Chrome 32, Opera 18, dan IE9 -11 pada 1/7/2014:
Untuk IE8, atur lebar / tinggi agar sesuai dengan iframe, dan tambahkan -ms-zoom ke .wrap container div:
Cukup gunakan metode favorit Anda untuk mengendus browser untuk memasukkan CSS yang sesuai secara kondisional, lihat Apakah ada cara untuk melakukan CSS bersyarat khusus browser di dalam file * .css? untuk beberapa ide.
IE7 adalah penyebab yang hilang karena -ms-zoom tidak ada sampai IE8.
Inilah HTML sebenarnya yang saya uji:
http://jsfiddle.net/esassaman/PnWFY/
sumber
Saya baru saja menguji dan bagi saya, tidak ada solusi lain yang berfungsi. Saya hanya mencoba ini dan itu bekerja dengan sempurna di Firefox dan Chrome, seperti yang saya harapkan:
dan css:
Ini skala semua konten sebesar 30%. Persentase lebar / tinggi tentu saja perlu disesuaikan (1 / scale_factor).
sumber
overflow: hidden;
ke.wrap
elemen. Saat Anda menggunakaniframe { width: 200%; height: 200%; transform: scale(0.5); }
iframe mulai meluap.Tindak lanjuti jawaban lxs : Saya melihat ada masalah di mana memiliki tag
zoom
dan--webkit-transform
sekaligus tampaknya membingungkan Chrome (versi 15.0.874.15) dengan melakukan efek zoom dua kali lipat. Saya dapat mengatasi masalah ini dengan menggantinyazoom
dengan-ms-zoom
(hanya ditargetkan pada IE), meninggalkan Chrome hanya untuk menggunakan--webkit-transform
tag, dan hal itu sudah beres.sumber
Anda tidak perlu membungkus iframe dengan tag tambahan. Pastikan Anda menambah lebar dan tinggi iframe dengan jumlah yang sama dengan menurunkan skala iframe.
misalnya untuk skala konten iframe hingga 80%:
Pada dasarnya, untuk mendapatkan ukuran iframe yang sama Anda perlu skala dimensi.
sumber
html {zoom: 0.4;}? -)
sumber
Saya pikir saya akan membagikan apa yang saya dapatkan, menggunakan banyak dari apa yang diberikan di atas. Saya belum memeriksa Chrome, tetapi berfungsi di IE, Firefox dan Safari, sejauh yang saya tahu.
Offset spesifik dan faktor zoom dalam contoh ini berfungsi untuk mengecilkan dan memusatkan dua situs web di iframe untuk tab Facebook (lebar 810px).
Dua situs yang digunakan adalah situs wordpress dan jaringan. Saya tidak terlalu baik dengan html, jadi ini mungkin bisa dilakukan lebih baik, tetapi hasilnya tampak bagus.
sumber
Jika Anda ingin iframe dan kontennya untuk menskala ketika jendela diubah ukurannya, Anda dapat mengatur yang berikut ini untuk acara pengubahan ukuran jendela serta acara iframe yang memuat.
Ini akan membuat iframe dan skala kontennya menjadi 100% lebar dari wrap div (atau berapa pun persen yang Anda inginkan). Sebagai bonus tambahan, Anda tidak perlu mengatur css dari frame ke nilai-nilai yang dikodekan karena semuanya akan diatur secara dinamis, Anda hanya perlu khawatir tentang bagaimana Anda ingin div pembungkus ditampilkan.
Saya sudah menguji ini dan berfungsi pada chrome, IE11, dan firefox.
sumber
Saya pikir Anda bisa melakukan ini dengan menghitung tinggi dan lebar yang Anda inginkan dengan javascript (via document.body.clientWidth dll) dan kemudian menyuntikkan iframe ke dalam HTML Anda seperti ini:
Saya tidak menguji ini di IE6 tetapi tampaknya bekerja dengan yang baik :)
sumber
Bagi Anda yang mengalami kesulitan menjalankan ini di IE, sebaiknya gunakan
-ms-zoom
seperti yang disarankan di bawah ini dan gunakan fungsi zoom pada#wrap
div, bukaniframe
id. Dalam pengalaman saya, denganzoom
fungsi mencoba skala div iframe dari#frame
, itu akan skala ukuran iframe dan bukan konten di dalamnya (yang adalah apa yang Anda inginkan).Terlihat seperti ini. Bekerja untuk saya di IE8, Chrome dan FF.
sumber
zoom
dalam Mode Standar IE8, gunakan-ms-zoom
dalam mode kebiasaan.Ini adalah solusi saya pada halaman dengan lebar 890px
sumber
Solusi #wrap #frame berfungsi dengan baik, asalkan angka dalam #wrap adalah #frame dikalikan faktor skala. Ini hanya menunjukkan bagian bingkai yang diperkecil. Anda dapat melihatnya di sini untuk menurunkan situs web dan memasukkannya ke formulir seperti pinterest (dengan plugin woodmark jQuery):
http://www.genautica.com/sandbox/woodmark-index.html
sumber
Jadi mungkin bukan solusi terbaik, tetapi sepertinya berhasil OK.
Jelas tidak berusaha memperbaiki orang tua, cukup menambahkan gaya "zoom: 50%" ke tubuh anak dengan sedikit javascript.
Mungkin bisa mengatur gaya elemen "HTML", tetapi tidak mencobanya.
sumber
Jika html Anda ditata dengan css, Anda mungkin dapat menautkan berbagai style sheet untuk ukuran yang berbeda.
sumber
Saya tidak berpikir HTML memiliki fungsi seperti itu. Satu-satunya hal yang dapat saya bayangkan akan melakukan trik adalah melakukan beberapa pemrosesan sisi server. Mungkin Anda bisa mendapatkan snapshot gambar dari halaman web yang ingin Anda layani, skala di server dan melayani ke klien. Ini akan menjadi halaman non-interaktif. (mungkin sebuah imagemap dapat memiliki tautan, tetapi tetap saja.)
Gagasan lain adalah memiliki komponen sisi server yang akan mengubah HTML. Bagian seperti fitur zoom firefox 2.0. ini tentu saja tidak zoom sempurna, tetapi lebih baik daripada tidak sama sekali.
Selain itu, saya kehabisan ide.
sumber
Seperti yang saya katakan, saya ragu Anda bisa melakukannya.
Mungkin Anda bisa menskalakan setidaknya teks itu sendiri, dengan mengatur gaya
font-size: 80%;
.Belum diuji, tidak yakin itu berfungsi, dan tidak akan mengubah ukuran kotak atau gambar.
sumber