Bagaimana saya bisa skala seluruh halaman web dengan CSS?

152

Dengan menggunakan Firefox, Anda dapat memperbesar seluruh halaman web hanya dengan menekan CTRL +. Apa yang dilakukannya adalah memperbesar seluruh halaman web secara proporsional (font, gambar, dll.).

Bagaimana saya bisa meniru fungsi yang sama hanya menggunakan CSS?

Apakah ada sesuatu seperti page-size: 150%(yang akan meningkatkan seluruh bagian halaman sebanyak x%?)

IJ Kennedy
sumber
7
Fitur pembesaran halaman Firefox muncul di setiap browser modern - mereplikasi sepertinya tidak ada gunanya.
Quentin
1
Saya setuju dengan David. Tampaknya jenis gunanya untuk meniru ini sejak browser sekarang hari telah fitur ini dibangun di ....
pengguna
5
ini sebenarnya akan menjadi fitur yang sangat berguna untuk perangkat seluler. Banyak ponsel sekarang meningkatkan PPI mereka tanpa mengakomodasi perbedaan (selain dari iPhone4, tentu saja).
DA.
38
Ini tidak mereplikasi itu. Mungkin bermanfaat untuk sesuatu seperti pratinjau halaman / elemen dalam div yang disematkan.
RichieHH
3
Perancang halaman harus dapat mengatur zoom default untuk halamannya. Saya memiliki halaman yang besar ketika saya membuatnya, tetapi kecil sekarang karena tampilan resolusi tinggi: lonniebest.com/CardTrick Alih-alih membuat ulang halaman, saya ingin diperbesar secara default.
Lonnie Best

Jawaban:

182

Anda mungkin dapat menggunakan zoomproperti CSS - didukung di IE 5.5+, Opera, dan Safari 4, dan Chrome

Dapatkah saya menggunakan: css Zoom

Firefox adalah satu-satunya peramban utama yang tidak mendukung Zoom ( item bugzilla di sini ) tetapi Anda dapat menggunakan properti "-moz-transform" milik "di Firefox 3.5 .

Jadi Anda bisa menggunakan:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 
Jon Galloway
sumber
1
Properti zoom berpemilik hanya didukung oleh IE. reference.sitepoint.com/css/zoom#compatibilitysection
Quentin
15
David, referensi itu sudah ketinggalan zaman - lihat versi peramban yang tercantum. Zoom CSS didukung di semua browser utama saat ini kecuali Firefox. Dan itu tidak lebih eksklusif dari ekstensi -moz- CSS.
Jon Galloway
3
Catatan: Saya pikir solusi lain yang telah diusulkan - seperti em dan penskalaan berbasis% - lebih "murni" tetapi tidak selalu praktis pada sebagian besar tata letak web kecuali Anda telah membangunnya dari awal.
Jon Galloway
1
Saya sudah menguji Opera 10b2 dan sepertinya tidak mendukungnya. Firefox nightly berperilaku aneh (fragmen yang diperbesar menghilang). IE5 / 6 bermasalah. Hanya berfungsi dengan baik di WebKit.
Kornel
2
terima kasih jon, info bagus! dalam skala firefox -moz-transform memang berfungsi, tetapi tergantung pada kasus penggunaan Anda, Anda mungkin perlu memperbaiki posisi elemen menggunakan -moz-transform-origin (cfr. developer.mozilla.org/En/CSS/-moz-transform -origin )
futtta
80

Ini adalah jawaban yang agak terlambat, tetapi Anda dapat menggunakannya

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

untuk memperbesar halaman sebesar 110%. Meskipun zoomgaya ada di sana, Firefox masih tidak mendukungnya dengan sedih.

Juga, ini sedikit berbeda dari zoom Anda. The css transformbekerja seperti zoom gambar, sehingga akan memperbesar halaman Anda tetapi tidak menyebabkan reflow, dll


Edit memperbarui asal transformasi.

kumarharsh
sumber
1
Terima kasih untuk ini, tetapi Anda perlu titik koma di antara deklarasi tersebut. Juga, ketika saya mencoba ini halaman bergeser ke kiri, melewati margin kiri, sehingga bagian kiri halaman tidak lagi terlihat. Menambahkan berbagai deklarasi "... transform-origin: 0 0" yang sesuai memperbaikinya.
Dave Burton
ya, saya seharusnya menyebutkan bahwa konten terpotong transform. Terima kasih atas komentarnya.
kumarharsh
1
Saya setuju dengan @Dave Burton: menggunakan transform-origin: 0 0;melakukan apa yang saya inginkan. Misalnya, untuk tampilannya halaman untuk 150%: transform: scale(1.5); transform-origin: 0 0;. Saya yakin jawaban yang baik @kumar_harsh seharusnya diperbaiki.
Kai Carver
@ KaiCarver jika Anda menggunakan metode ini, itu akan selalu menghasilkan kliping. Tidak peduli yang menunjukkan Anda gunakan untuk transform-origin. Apa yang saya tulis hanyalah satu contoh dari nilai apa yang digunakan. Anda tentu saja bebas menggunakan transform-origin: 0 0jika cocok dengan case-use Anda (atau jika Anda tidak peduli dengan apa yang ada di sudut kanan bawah)
kumarharsh
@AngularM dapatkah Anda membagikan cuplikan kode untuk menampilkan perilaku? Saya yakin ada beberapa alasan lain untuk ini.
kumarharsh
18

Jika CSS Anda dibangun sepenuhnya di sekitar exatau emunit, maka ini mungkin dan layak. Anda hanya perlu mendeklarasikan font-size: 150%gaya Anda untuk bodyatau html. Ini harus menyebabkan setiap panjang lain untuk skala secara proporsional. Anda tidak dapat mengatur skala gambar dengan cara ini, kecuali mereka mendapatkan gaya juga.

Tapi itu sangat besar jika di sebagian besar situs.

Joey
sumber
3
Itu hanya akan mengubah ukuran font saya. CTRL + juga proposisi memperluas lebar tetap, ketinggian dan ukuran gambar juga.
2
Saya tahu, tapi sedekat yang Anda bisa dapatkan dengan CSS murni. Juga bukan hanya font Anda yang berubah, tetapi segala sesuatu di mana dimensi ditentukan sebagai kelipatan dari ukuran font. Artinya, semua yang Anda gunakan %, ematau exunit.
Joey
1
Itu tidak benar. Saya telah menguji solusi yang saya sebutkan di bawah ini (zoom + -moz-transform properties), dan berfungsi pada FF3.5, IE6 +, Safari, dan Opera. Ini skala gambar serta teks. Anda dapat mengatur skala halaman dalam CSS.
Jon Galloway
6

Seperti kata Johannes - tidak cukup perwakilan untuk mengomentari langsung jawabannya - Anda memang dapat melakukan ini selama semua elemen "dimensi ditentukan sebagai kelipatan dari ukuran font. Artinya, semua yang Anda gunakan%, em atau ex unit ". Meskipun saya pikir% didasarkan pada elemen yang mengandung, bukan ukuran font.

Dan Anda biasanya tidak akan menggunakan unit relatif ini untuk gambar, mengingat mereka terdiri dari piksel, tetapi ada trik yang membuat ini jauh lebih praktis.

Jika Anda mendefinisikan body{font-size: 62.5%};maka 1em akan setara dengan 10px. Sejauh yang saya tahu ini berfungsi di semua browser utama.

Kemudian Anda dapat menentukan (misalnya) gambar persegi 100px Anda width: 10em; height: 10em;dan dengan asumsi skala Firefox diatur ke default, gambar akan menjadi ukuran alami mereka.

Buat body{font-size: 125%};dan semuanya - termasuk gambar - akan menjadi ukuran asli ganda.

e100
sumber
Saya tidak mengerti, jika saya mengatakan body {font-size: 62.5%; font-size: 125%} - bagaimana itu mendefinisikan 1em menjadi 10px. Bisakah browser mengabaikan deklarasi ukuran font pertama dan kemudian membuat 125% = 10px?
Saya pikir Anda salah paham. Anda tidak akan melakukan keduanya sekaligus. 62,5 x2 = 125 ... untuk menunjukkan bagaimana Anda dapat skala hal dengan menyesuaikan nilainya.
Kera-inago
Ya. Saya seharusnya mengatakan 'lalu jika Anda menggunakan Javascript untuk mengatur body {font-size: 125%} semua elemen halaman akan berlipat ganda dalam ukuran'.
e100
3

Dengan kode ini 1em atau 100% akan sama dengan 1% dari tinggi badan

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Cedric Austen-Brown
sumber
2
 * {
transform: scale(1.1, 1.1)
}

ini akan mengubah setiap elemen pada halaman

Rushabh Sooni
sumber
1

Jon Tan telah melakukan ini dengan situsnya - http://jontangerine.com/ Semuanya termasuk gambar telah dinyatakan dalam ems. Segala sesuatu. Inilah bagaimana efek yang diinginkan tercapai. Zoom teks dan zoom layar menghasilkan hasil yang hampir sama persis.

Andy Ford
sumber
1

CSS tidak akan dapat memperbesar sesuai permintaan, tetapi jika Anda memasangkan CSS dengan JS, Anda dapat mengubah beberapa nilai untuk membuat halaman terlihat lebih besar. Namun, seperti yang telah dikatakan, fitur ini standar saat ini di browser modern: tidak perlu mereplikasi itu. Faktanya, mereplikasi itu akan memperlambat situs web Anda (lebih banyak hal untuk dimuat, lebih banyak JS atau CSS untuk diuraikan atau dieksekusi dan diterapkan, dll.)

T0xicCode
sumber
Ini adalah fitur browser standar, tetapi menambahkan fitur langsung ke situs berarti Anda tidak harus bergantung pada (1) keahlian pengguna dengan browser pilihan mereka dan (2) instruksi spesifik browser
Ags1
1

Saya memiliki kode berikut yang menskalakan seluruh halaman melalui properti CSS. Yang penting adalah mengatur body.style.width ke kebalikan dari zoom untuk menghindari pengguliran horizontal. Anda juga harus mengatur asal-usul transformasi ke kiri atas untuk menjaga kiri atas dokumen di kiri atas jendela.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
Ags1
sumber