การปรับขนาดที่กล่าวถึงที่นี่ไม่ได้อ้างถึงการปรับขนาดของเบราว์เซอร์ แต่เป็นการปรับสัดส่วนเปอร์เซ็นต์ของเนื้อหาเว็บเบราว์เซอร์ (กดปุ่ม CTRL และปุ่มเครื่องหมาย + หรือปุ่มลงนาม)
มีหลายวิธีในการตรวจจับการปรับขนาดแบบนี้ พื้นที่ QQ ใช้แฟลชเพื่อตรวจสอบว่าเบราว์เซอร์กำลังปรับขนาดหรือไม่ นี่คือวิธี JavaScript ในการตรวจจับการปรับขนาดของเบราว์เซอร์
สำหรับ IE6 ฉันแค่เพิกเฉยเพราะ IE6 สามารถปรับขนาดข้อความได้เท่านั้น
ก่อนอื่นมาพูดคุยเกี่ยวกับอินเทอร์เฟซการตรวจจับมาตรฐานที่ได้รับจากเบราว์เซอร์ Window.devicePixelRatio เป็นอัตราส่วนของพิกเซลทางกายภาพบนอุปกรณ์และพิกเซลอิสระของอุปกรณ์ แอตทริบิวต์นี้สามารถใช้เพื่อตรวจสอบว่าหน้าเว็บถูกปรับขนาดหรือไม่ บนเบราว์เซอร์พีซีปกติค่าเริ่มต้นคือ 1 หากไม่มีการซูมโดยค่าเริ่มต้น ปัจจุบัน Firefox, Chrome ฯลฯ ได้รับการสนับสนุนอย่างดี
ถึงเวลาที่จะพูดคุยเกี่ยวกับวิธีการจัดการเช่น IE มีสองแอตทริบิวต์: window.screen.devicexdpi และ window.screen.logicalxdpi Devicexdpi เป็นพิกเซลทางกายภาพที่สอดคล้องกันบนอุปกรณ์และ Logicalxdpi เป็นสัดส่วนของพิกเซลอิสระของอุปกรณ์ อินเทอร์เฟซการตรวจจับของมาตรฐานการประมาณนั้นขึ้นอยู่กับการปรับปรุงวิธี IE ค่าเริ่มต้นของแอตทริบิวต์ทั้งสองนี้บนระบบเหนือ Windows XP+ คือ 96 เนื่องจากค่าเริ่มต้นของระบบคือ 96DPI
สำหรับเบราว์เซอร์ที่ไม่รองรับสองข้างต้นคุณยังสามารถใช้คุณสมบัติสองประการของ window.outerwidth และ window.innerWidth Outerwidth ส่งคืนความกว้างภายนอกที่แท้จริงขององค์ประกอบหน้าต่าง, InnerWidth ส่งคืนความกว้างภายในที่แท้จริงขององค์ประกอบหน้าต่างความกว้างทั้งสองรวมถึงความกว้างรวมถึงแถบเลื่อน
ด้วยคุณลักษณะเหล่านี้คุณสามารถแก้เบราว์เซอร์ทั่วไปบนเบราว์เซอร์พีซี รหัสการใช้งานมีดังนี้:
หากค่าส่งคืนของฟังก์ชั่น DetectZoom คือ 100 จะเป็นระดับการซูมเริ่มต้นหากมากกว่า 100 มันจะขยายใหญ่ขึ้นและถ้ามันน้อยกว่า 100 มันจะหดตัว
ฟังก์ชั่น detectZoom () {อัตราส่วน var = 0, หน้าจอ = window.screen, ua = navigator.useragent.toLowerCase (); if (window.devicepixelRatio! == undefined) {อัตราส่วน = window.devicePixelRatio; } อื่นถ้า (~ ua.indexof ('msie')) {ถ้า (screen.devicexdpi && screen.logicalxdpi) {ratio = screen.devicexdpi / screen.logicalxdpi; }} อื่นถ้า (window.outerWidth! == undefined && window.innerWidth! == undefined) {อัตราส่วน = window.outerWidth / window.innerWidth; } if (อัตราส่วน) {อัตราส่วน = math.round (อัตราส่วน * 100); } อัตราส่วนคืน;};บทความต้นฉบับโปรดระบุการพิมพ์ซ้ำ: พิมพ์ซ้ำจากการพัฒนาส่วนหน้า