Bagaimana saya bisa skala seluruh halaman web dengan CSS?

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%?)

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;
} 

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.

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.

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.

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

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

ini akan mengubah setiap elemen pada halaman

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.

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.)

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 + "%";
        }