Pertanyaan Bagaimana cara meningkatkan level zoom browser pada pemuatan halaman?


Bagaimana cara meningkatkan level zoom browser pada pemuatan halaman?

ini aku tautan web Baru-baru ini saya mendapat tugas untuk meningkatkan lebarnya seperti jika Firefox kita tekan Ctrl + dan tingkat pembesaran peramban meningkat, adakah cara untuk melakukan ini secara otomatis di semua browser pada pemuatan halaman.


42
2018-02-25 05:30


asal


Jawaban:


Secara pribadi saya pikir ini adalah ide yang buruk; baik desain situs Anda sehingga skala dengan mudah (tidak sulit dengan teknik CSS / HTML yang tepat) atau hanya memungkinkan pengguna untuk melakukan apa yang mereka inginkan (mungkin mereka sudah browser mereka diperbesar atau mereka menggunakan resolusi rendah). Biasanya Anda tidak harus membuat keputusan UX untuk orang.

Tetapi itu mungkin.

Demo: http://jsfiddle.net/q6kebgbh/4/

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-origin: 0 0;
}

Perhatikan bahwa versi sebelumnya dari jawaban ini digunakan transform untuk mendukung lebih banyak browser. Namun, kode yang dipersingkat ini tampaknya berfungsi untuk versi Chrome, FF, Safari, dan IE saat ini (serta versi IE sebelumnya, yang telah mendukung zoom untuk waktu yang lama).


47
2018-02-25 05:40



Coba ini:

<script type="text/javascript">
        function zoom() {
            document.body.style.zoom = "300%" 
        }
</script>

<body onload="zoom()">
<h6>content</h6>
</body>

13
2018-02-25 05:40



Anda dapat mencoba CSS zoom aturan. Saya tidak pernah benar-benar mencobanya, tetapi dalam teori pengaturan aturan css seperti berikut mungkin melakukan apa yang Anda inginkan:

body { zoom: 2; }

Catatan: ini tidak benar-benar mengubah tingkat zoom browser. Itu membuat semuanya di halaman lebih besar :)


5
2018-02-25 05:37



Itu adalah jawaban untuk posting yang berpikiran sempit seperti

Secara pribadi saya pikir ini adalah ide yang buruk;

atau

mengapa tidak gaya itu menjadi lebih besar

e.t.c

Saya punya PWA yang memiliki desain minimalis dengan banyak spasi dan ditujukan untuk ponsel di tempat pertama (jadi awalnya saya tidak berpikir tentang layar besar). Bukan hanya situs web yang membosankan dengan artikel. Ini adalah UI yang cukup kompleks.

Jadi ketika Anda membukanya di layar yang sangat besar (TV atau monitor besar) terlihat sangat jelek (karena terlalu banyak spasi pada saat itu). Dan sebagai pengguna, saya perlu setiap kali memperbesarnya. Ini cukup bodoh. Webapp saya lebih estetis dan lebih mudah digunakan dari sofa di tv ketika sedikit tergores pada layar besar.

Jadi apa yang saya lakukan, di @media saya mengubah properti zoom jika tampilan terlalu lebar. Masalah yang -moz-transform: skala sangat berbeda dari zoom.

Jadi intinya jika Anda ingin memperbesar situs web dengan css Anda memiliki tiga opsi:

  • (disarankan, lebih keras) Untuk mengorbankan beberapa pilihan desain dan penggunaan em dan rem unit sambil mengembangkan halaman Anda. Itu akan memungkinkan mengubah "zoom" halaman semudah mengubah ukuran font di tubuh.

  • (lebih mudah) Untuk menggunakan "mengubah: skala" untuk pengalaman lintas-browser, tetapi mungkin berfungsi tidak seperti yang Anda harapkan.

  • (tidak disarankan, mudah) Untuk menggunakan properti CSS "zoom" meskipun fakta bahwa itu bukan properti standar. Pengorbanan Firefox. Juga, memiliki beberapa perilaku tak terduga kecil dengan flexbox posisi benar-benar.


0
2018-03-01 13:55