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%?)
Jawaban:
Anda mungkin dapat menggunakan
zoom
properti CSS - didukung di IE 5.5+, Opera, dan Safari 4, dan ChromeDapatkah 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:
sumber
Ini adalah jawaban yang agak terlambat, tetapi Anda dapat menggunakannya
untuk memperbesar halaman sebesar 110%. Meskipun
zoom
gaya ada di sana, Firefox masih tidak mendukungnya dengan sedih.Juga, ini sedikit berbeda dari zoom Anda. The
css transform
bekerja seperti zoom gambar, sehingga akan memperbesar halaman Anda tetapi tidak menyebabkan reflow, dllEdit memperbarui asal transformasi.
sumber
transform
. Terima kasih atas komentarnya.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.transform-origin
. Apa yang saya tulis hanyalah satu contoh dari nilai apa yang digunakan. Anda tentu saja bebas menggunakantransform-origin: 0 0
jika cocok dengan case-use Anda (atau jika Anda tidak peduli dengan apa yang ada di sudut kanan bawah)Jika CSS Anda dibangun sepenuhnya di sekitar
ex
atauem
unit, maka ini mungkin dan layak. Anda hanya perlu mendeklarasikanfont-size: 150%
gaya Anda untukbody
atauhtml
. 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.
sumber
%
,em
atauex
unit.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.sumber
Dengan kode ini 1em atau 100% akan sama dengan 1% dari tinggi badan
sumber
ini akan mengubah setiap elemen pada halaman
sumber
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.
sumber
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.)
sumber
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.
sumber