Làm cách nào để tăng mức thu phóng của trình duyệt khi tải trang?Làm cách nào để tăng mức thu phóng của trình duyệt khi tải trang?
đây là web link của tôi gần đây tôi có nhiệm vụ tăng chiều rộng giống như Firefox chúng tôi nhấn Ctrl + và mức thu phóng của trình duyệt tăng là có bất kỳ cách nào để thực hiện điều này tự động trong tất cả các trình duyệt khi tải trang.
Cá nhân tôi nghĩ rằng đây là một ý tưởng tồi; hoặc thiết kế trang web của bạn để dễ dàng chia tỷ lệ (không khó với các kỹ thuật CSS/HTML thích hợp) hoặc chỉ cho phép người dùng thực hiện những gì họ muốn (có thể họ đã thu phóng trình duyệt của họ hoặc họ sử dụng độ phân giải thấp). Thông thường, bạn không nên đưa ra quyết định UX cho mọi người.
Nhưng điều đó là có thể.
Demo: http://jsfiddle.net/q6kebgbh/4/
.zoom {
zoom: 2;
-moz-transform: scale(2);
-moz-transform-origin: 0 0;
}
Lưu ý rằng phiên bản trước của câu trả lời này sử dụng transform để hỗ trợ nhiều trình duyệt. Tuy nhiên, mã rút gọn này dường như hoạt động đối với các phiên bản hiện tại của Chrome, FF, Safari và IE (cũng như các phiên bản trước của IE, đã hỗ trợ zoom trong một thời gian dài).
Cảm ơn bạn rất nhiều công việc của nó làm việc tốt trong Firefox, Chrome nhưng không làm việc trong internet explorer cũ bất kỳ đề nghị tốt tôi cũng đang tải ie8 –
@DanishIqbal - bạn sẽ cần phải sử dụng hai phương pháp khác nhau để hỗ trợ phiên bản cũ của IE. Tôi đã cập nhật mẫu của mình để hiển thị hỗ trợ cho tất cả các trình duyệt. –
Ẩn tất cả flash trong trang web này –
Bạn có thể thử quy tắc CSS zoom. Tôi đã không bao giờ thực sự thử nó, nhưng trong lý thuyết thiết lập một quy tắc css như sau có thể làm những gì bạn muốn:
body { zoom: 2; }
Lưu ý: điều này không thực sự thay đổi mức thu phóng của trình duyệt. Nó chỉ làm cho mọi thứ trên trang lớn hơn :)
@jaremysawesome cảm ơn bạn đã làm việc hiệu quả trong Chrome, Internet Explorer nhưng không có trong Firefox bất kỳ đề xuất nào –
@DanishIqbal Điều này hoạt động với FF: http://stackoverflow.com/a/12603229/694469 Nó sử dụng '-moz-transform: scale (2) '. – KajMagnus
'-moz-transform zoom' không giống với 'zoom'. đầu tiên phá vỡ bố trí trang web phức tạp của tôi có chứa các yếu tố cố định và hoàn toàn vị trí.https: //www.word-party.com/ –
Hãy thử điều này:
<script type="text/javascript">
function zoom() {
document.body.style.zoom = "300%"
}
</script>
<body onload="zoom()">
<h6>content</h6>
</body>
cảm ơn bạn rất nhiều mã của bạn đang hoạt động hoàn hảo trong chrome cho phép tôi kiểm tra trong các trình duyệt khác –
nó không hoạt động Firefox và trong internet explorer nó yêu cầu cho phép script bất kỳ đề xuất –
Hi Iqbal thử sử dụng css body {zoom: 300%; } – Vinod
Đó là một câu trả lời để thu hẹp đầu óc bài viết như
Cá nhân tôi nghĩ rằng đây là một ý tưởng tồi;
hoặc
tại sao không phong cách nó phải lớn hơn
vv
Tôi có PWA trong đó có một thiết kế tối giản với rất nhiều khoảng trắng và dành cho điện thoại di động trong nơi đầu tiên (vì vậy ban đầu tôi không nghĩ về màn hình lớn). Nó không chỉ là trang web nhàm chán với các bài báo. Đó là giao diện người dùng khá phức tạp.
Vì vậy, khi bạn mở nó trên một màn hình rất lớn (TV hoặc màn hình lớn) nó trông thực sự xấu xí (vì nó là quá nhiều khoảng trắng tại thời điểm đó). Và với tư cách là một người dùng, tôi cần mọi thời gian để phóng to. Nó khá ngu ngốc. Webapp của tôi là đẹp hơn về mặt thẩm mỹ cũng như dễ dàng hơn để sử dụng từ một chiếc ghế sofa trên tv khi nó được scalled lên một chút trên màn hình lớn.
Vì vậy, những gì tôi đang làm, trong @media tôi thay đổi thuộc tính thu phóng nếu màn hình quá rộng. Vấn đề mà -moz-transform: scale hoàn toàn khác với zoom.
dòng Vì vậy, phía dưới nếu bạn muốn phóng to trang web với css bạn có ba lựa chọn:
(đề nghị, khó khăn hơn) Để hy sinh một số lựa chọn thiết kế và sử dụng em và rem đơn vị trong khi phát triển trang của bạn. Điều đó sẽ cho phép thay đổi "thu phóng" của trang dễ dàng như thay đổi kích thước phông chữ trên cơ thể.
(dễ dàng hơn) Để sử dụng "chuyển đổi: tỷ lệ" cho trải nghiệm trên nhiều trình duyệt, nhưng nó có thể hoạt động không như mong đợi.
(không được khuyến nghị, dễ dàng) Để sử dụng thuộc tính "thu phóng" CSS mặc dù thực tế đó không phải là thuộc tính chuẩn. Hy sinh Firefox. Ngoài ra, có một số hành vi không mong muốn nhỏ với flexboxes hoàn toàn vị trí.
Lưu ý: Tôi đã googled về điều này không tìm thấy điều này hoặc điều gì đó giải quyết vấn đề này –
Nếu bạn ** luôn muốn trang web lớn hơn, tại sao không phong cách nó lớn hơn? –
@TimMedora cảm ơn bạn đã trả lời thực sự yêu cầu thêm thời gian để tăng kích thước của tất cả mọi thứ và tôi nghĩ nếu tôi chỉ tăng mức thu phóng để tốt hơn hãy thêm mã vào các trang –