2010-12-27 74 views
6

Có thể kích hoạt chức năng phóng to và thu nhỏ của Trình duyệt thông qua JavaScript không?kích hoạt trình duyệt Phóng to và thu nhỏ chức năng

Tôi muốn thêm nút Phóng to (+) và Thu nhỏ (-) trong trang web của tôi và bằng cách nhấp vào nút muốn gọi phóng to của trình duyệt (có thể gọi bằng cách nhấn ctrl và +)/chức năng zoom-out (ctrl và -).

+0

tôi loại bỏ các 'javascript-events' thẻ như câu hỏi này không có một khía cạnh sự kiện. –

+0

có thể trùng lặp của [Thay đổi mức thu phóng của trình duyệt] (http://stackoverflow.com/questions/1055336/changing-the-browser-zoom-level) – derobert

+0

Tôi đã có thể viết một cái gì đó hoạt động cho IE, Chrome và FF: http://stackoverflow.com/questions/4386760/calling-keyevent-from-mouse/4386873#4386873 –

Trả lời

10

Tôi không tin rằng có một tiêu chuẩn dựa trên cách để làm điều này. Một số trình duyệt nhất định có thể cung cấp API của riêng họ để thực hiện điều này nhưng tôi nghi ngờ.

Điều đó đang được nói rằng tôi đã hoàn thành hiệu ứng này trong quá khứ thông qua một số thủ thuật CSS. Về cơ bản, CSS của bạn xác định mọi phép đo (chiều rộng, chiều cao, lề, đệm, kích thước phông chữ, v.v.) thay cho px. Điều này về cơ bản làm cho kích thước của tất cả mọi thứ phụ thuộc vào kích thước phông chữ mặc định của tài liệu. Sau đó, để phóng to bạn thay đổi kích thước phông chữ của thẻ body để làm cho mọi thứ nhỏ hơn hoặc lớn hơn. Nếu bạn thực hiện điều này một cách cẩn thận, hiệu ứng sẽ trông giống như khi người dùng phóng to bằng trình duyệt của họ.

Để làm cho cuộc sống dễ dàng hơn khi thực hiện việc này, tôi thích sử dụng biểu định kiểu đặt lại CSS đặt 1em thành 10px. Bằng cách đó, nếu bạn muốn một div được rộng 200px, bạn chỉ cần đặt nó là 20em. Bạn có thể thực hiện việc này bằng cách đặt kích thước phông chữ cơ thể thành 62,5% trong bảng định kiểu lại CSS của bạn. Vì hầu hết các trình duyệt đều có kích thước phông chữ mặc định là 16px và do đó 1em = 16px, 10px là 62,5%.

Tôi hy vọng điều này sẽ giúp ích rất nhiều, nhưng việc sử dụng em thay vì px đã giúp tôi vô số cách khi làm việc với HTML và CSS.

+1

Đối với bản ghi, trong các trình duyệt hiện đại, điều này thậm chí có thể dễ dàng hơn để triển khai bằng cách sử dụng rem (root em) thay cho em. Xem http://snook.ca/archives/html_and_css/font-size-with-rem –

0

Tôi không tin rằng bạn có thể. Trên IE, bạn có thể mô phỏng nó với thuộc tính CSS zoom, nhưng đó không phải là tiêu chuẩn và do đó hỗ trợ bên ngoài IE sẽ thay đổi.

4

Hãy suy nghĩ này đã được trả lời với

window.parent.document.body.style.zoom = 1.5; 

"Zoom" a browser window/view with JavaScript?

+0

+1 để có câu trả lời nhanh chóng và dễ dàng. Lưu ý rằng trạng thái này sẽ không được lưu như vậy nếu bạn phóng to với trình duyệt, tuy nhiên. Sau đó, nhà phát triển nên lưu trạng thái thu phóng trong biến phiên và phát lại tệp body.onLoad(). –

Các vấn đề liên quan