ฉันจะขยายหน้าเว็บทั้งหมดด้วย CSS ได้อย่างไร

153

ใช้ Firefox CTRL +คุณสามารถขยายหน้าเว็บทั้งหมดโดยเพียงแค่กด สิ่งนี้จะขยายขนาดหน้าเว็บทั้งหมด (แบบอักษรรูปภาพและอื่น ๆ ) ตามสัดส่วน

ฉันจะทำซ้ำฟังก์ชั่นเดียวกันโดยใช้ CSS ได้อย่างไร

มีสิ่งที่ชอบpage-size: 150%(ซึ่งจะเพิ่มส่วนหน้าทั้งหมดโดย x%?)

html css resize

— IJ Kennedy
แหล่งที่มา

7

คุณสมบัติการซูมหน้าของ Firefox จะปรากฏขึ้นในเบราว์เซอร์สมัยใหม่ทุกรุ่น - การจำลองแบบดูเหมือนไม่มีประโยชน์

— Quentin

1

ฉันเห็นด้วยกับเดวิด ดูเหมือนว่าชนิดของไม่มีจุดหมายที่จะทำซ้ำนี้ตั้งแต่เบราว์เซอร์ในขณะนี้วันที่มีคุณสมบัตินี้สร้างขึ้นใน ....

— ผู้ใช้

5

นี่จะเป็นคุณสมบัติที่มีประโยชน์อย่างเหลือเชื่อสำหรับอุปกรณ์มือถือ โทรศัพท์จำนวนมากกำลังเพิ่ม PPI โดยไม่รองรับความแตกต่าง (นอกเหนือจาก iPhone4 แน่นอน)

— ดา

38

มันไม่ได้จำลองแบบ มันอาจมีประโยชน์สำหรับบางอย่างเช่นหน้าตัวอย่าง / องค์ประกอบใน div ที่ฝังอยู่

— RichieHH

3

ผู้ออกแบบหน้าควรตั้งค่าการซูมเริ่มต้นสำหรับหน้าของเขา ฉันมีเพจที่มีขนาดใหญ่เมื่อฉันสร้างมัน แต่ตอนนี้มีขนาดเล็กเนื่องจากหน้าจอความละเอียดสูง: lonniebest.com/CardTrickแทนที่จะสร้างหน้าใหม่ฉันต้องการซูมโดยค่าเริ่มต้น

— Lonnie Best

182

คุณอาจจะสามารถใช้zoomคุณสมบัติCSS - รองรับใน IE 5.5+, Opera และ Safari 4 และ Chrome

ฉันสามารถใช้: css Zoom

Firefox เป็นเบราว์เซอร์เท่านั้นที่สำคัญที่ไม่สนับสนุนการซูม ( Bugzilla รายการที่นี่ ) แต่คุณสามารถใช้"กรรมสิทธิ์" -moz-เปลี่ยนสถานที่ให้บริการใน Firefox 3.5

ดังนั้นคุณสามารถใช้:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
}

— Jon Galloway
แหล่งที่มา

1

คุณสมบัติการซูมที่เป็นกรรมสิทธิ์เฉพาะได้รับการสนับสนุนโดย IE เท่านั้น reference.sitepoint.com/css/zoom#compatibilitysection

— เควนติน

15

เดวิดการอ้างอิงนั้นล้าสมัยมาก - ดูเวอร์ชั่นเบราว์เซอร์ที่มันแสดง CSS Zoom ได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมดยกเว้น Firefox และไม่มีกรรมสิทธิ์ใด ๆ เกินกว่าส่วนขยาย -moz- CSS

— Jon Galloway

3

หมายเหตุ: ฉันคิดว่าโซลูชันอื่น ๆ ที่ได้รับการเสนอเช่น em และมาตราส่วนที่ใช้% นั้นมีความ "บริสุทธิ์" มากกว่า แต่ไม่จำเป็นต้องใช้กับเลย์เอาต์ของเว็บส่วนใหญ่เว้นแต่ว่าคุณจะสร้างขึ้นมาตั้งแต่ต้น

— Jon Galloway

1

ฉันทดสอบ Opera 10b2 แล้วดูเหมือนจะไม่รองรับ Firefox ทุกคืนจะทำงานผิดปกติ (ส่วนที่ซูมจะหายไป) IE5 / 6 เป็นรถบั๊กกี้ ทำงานได้ดีใน WebKit เท่านั้น

— Kornel

2

ขอบคุณจอนข้อมูลที่ดี! ใน firefox -moz-transform scale ใช้งานได้จริง แต่ขึ้นอยู่กับการใช้งานของคุณคุณอาจต้องแก้ไขตำแหน่งขององค์ประกอบโดยใช้ -moz-transform-origin (cfr. developer.mozilla.org/En/CSS/-moz-transform - ต้นกำเนิด )

— futtta

81

นี่เป็นคำตอบที่ค่อนข้างช้า แต่คุณสามารถใช้ได้

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

เพื่อซูมหน้า 110% แม้ว่าzoomสไตล์จะอยู่ที่นั่น Firefox ก็ยังไม่สนับสนุนอย่างน่าเศร้า

นอกจากนี้ยังแตกต่างจากการซูมของคุณเล็กน้อย การcss transformทำงานเหมือนการซูมภาพดังนั้นมันจะขยายหน้าของคุณ แต่ไม่ทำให้เกิดการเรียงภาพ ฯลฯ

แก้ไขปรับปรุงต้นกำเนิดการแปลง

— kumarharsh
แหล่งที่มา

1

ขอบคุณสำหรับสิ่งนี้ แต่คุณต้องใช้เครื่องหมายอัฒภาคระหว่างการประกาศ นอกจากนี้เมื่อฉันลองทำสิ่งนี้เพจจะเลื่อนไปทางซ้ายผ่านขอบซ้ายเพื่อไม่ให้มองเห็นส่วนด้านซ้ายของหน้าอีกต่อไป การเพิ่ม "... transform-origin: 0 0" ประกาศต่าง ๆ ที่ได้รับการแก้ไข

— เดฟเบอร์ตัน

transformใช่ฉันควรได้กล่าวว่าเนื้อหาที่ถูกตัดด้วย ขอบคุณสำหรับความคิดเห็น

— kumarharsh

1

ฉันเห็นด้วยกับ @Dave Burton: การใช้transform-origin: 0 0;ทำสิ่งที่ฉันต้องการ ตัวอย่างเช่นในการซูมหน้าถึง transform: scale(1.5); transform-origin: 0 0;150% ฉันเชื่อว่าคำตอบที่ดีของ @kumar_harsh ควรได้รับการแก้ไข

— Kai Carver

@KaiCarver หากคุณใช้วิธีนี้มันจะส่งผลให้มีการตัด ไม่ว่าคุณจะใช้จุดtransform-originใด สิ่งที่ฉันเขียนเป็นเพียงตัวอย่างหนึ่งของค่าที่จะใช้ แน่นอนว่าคุณจะใช้งานได้ฟรีtransform-origin: 0 0ถ้ามันเหมาะกับกรณีการใช้งานของคุณ (หรือถ้าคุณไม่สนใจว่ามีอะไรอยู่ที่มุมล่างขวา)

— คุมาร์ฮาร์ช

@AngularM คุณสามารถแบ่งปันข้อมูลโค้ดเพื่อแสดงพฤติกรรมได้หรือไม่ ฉันแน่ใจว่ามีเหตุผลอื่นสำหรับเรื่องนี้

— kumarharsh

18

หาก CSS ของคุณถูกสร้างขึ้นอย่างสมบูรณ์รอบ ๆexหรือemหน่วยสิ่งนี้อาจเป็นไปได้และเป็นไปได้ คุณต้องการเพียงแค่ต้องประกาศfont-size: 150%ในสไตล์ของคุณสำหรับหรือbody htmlสิ่งนี้ควรทำให้ความยาวอื่น ๆ แม้ว่าคุณจะไม่สามารถปรับขนาดภาพด้วยวิธีนี้เว้นแต่ว่าพวกเขาจะมีสไตล์เช่นกัน

แต่มันก็ใหญ่มากถ้าอยู่ในไซต์ส่วนใหญ่

— โจอี้
แหล่งที่มา

3

นั่นจะเปลี่ยนขนาดตัวอักษรของฉันเท่านั้น CTRL + ยังเสนอให้ขยายความกว้างคงที่ความสูงและขนาดภาพด้วย

2

ฉันรู้ แต่มันใกล้เคียงกับที่คุณจะได้รับด้วย CSS บริสุทธิ์ นอกจากนี้ไม่เพียงเปลี่ยนแบบอักษรของคุณ แต่ทุกอย่างที่มีการระบุขนาดเป็นขนาดหลายขนาดของแบบอักษร ความหมายทุกอย่างที่คุณใช้%, emหรือexหน่วย

— Joey

1

นั่นไม่ถูกต้อง ฉันได้ทดสอบวิธีแก้ปัญหาที่ฉันแสดงไว้ด้านล่าง (ซูม + -moz-transform properties) และทำงานบน FF3.5, IE6 +, Safari และ Opera มันชั่งภาพเช่นเดียวกับข้อความ คุณสามารถปรับขนาดหน้าใน CSS

— Jon Galloway

6

ดังที่โยฮันเนสบอก - ตัวแทนไม่เพียงพอที่จะแสดงความคิดเห็นโดยตรงกับคำตอบของเขา - คุณสามารถทำสิ่งนี้ได้ตราบใดที่องค์ประกอบทั้งหมด "" ถูกระบุเป็นขนาดหลายขนาดของแบบอักษรความหมายทุกสิ่งที่คุณใช้%, em หรือ ex หน่วย" แม้ว่าฉันคิดว่า% จะขึ้นอยู่กับองค์ประกอบที่มีไม่ใช่ขนาดตัวอักษร

และโดยปกติคุณจะไม่ใช้หน่วยที่สัมพันธ์กันเหล่านี้กับภาพเนื่องจากมันประกอบไปด้วยพิกเซล แต่ก็มีกลอุบายที่ทำให้มันใช้งานได้จริงมากขึ้น

หากคุณกำหนดbody{font-size: 62.5%};1em จะเท่ากับ 10px เท่าที่ฉันรู้ว่าสิ่งนี้ใช้ได้กับเบราว์เซอร์หลักทั้งหมด

จากนั้นคุณสามารถระบุ (เช่น) ภาพสี่เหลี่ยมจัตุรัสขนาด 100px ของคุณด้วยwidth: 10em; height: 10em;และสมมติว่ามาตราส่วนของ Firefox ถูกตั้งเป็นค่าเริ่มต้นรูปภาพจะมีขนาดตามธรรมชาติ

ทำbody{font-size: 125%};และทุกอย่างรวมถึงรูปภาพจะเป็นขนาดดั้งเดิมสองเท่า

— e100
แหล่งที่มา

ฉันไม่เข้าใจถ้าฉันพูดว่า body {font-size: 62.5%; ขนาดตัวอักษร: 125%} - จะกำหนดให้ 1em เป็น 10px ได้อย่างไร เบราว์เซอร์สามารถเพิกเฉยต่อการประกาศขนาดตัวอักษรแรกแล้วเพียงทำให้ 125% = 10px ได้หรือไม่

ฉันคิดว่าคุณเข้าใจผิด คุณจะไม่ทำทั้งสองอย่างพร้อมกัน 62.5 x2 = 125 ... เพื่อแสดงว่าคุณสามารถปรับขนาดได้โดยการปรับค่า

— Ape-inago

อ๋อ ฉันควรจะพูดว่า 'ถ้าคุณใช้ Javascript เพื่อตั้งค่าเนื้อหา {font-size: 125%} องค์ประกอบของหน้าทั้งหมดจะมีขนาดเป็นสองเท่า'

— e100

3

ด้วยรหัสนี้ 1em หรือ 100% จะเท่ากับ 1% ของความสูงของร่างกาย

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

— เซดริกออสเตน - บราวน์
แหล่งที่มา

2

 * {
transform: scale(1.1, 1.1)
}

สิ่งนี้จะเปลี่ยนทุกองค์ประกอบในหน้า

— Rushabh Sooni
แหล่งที่มา

1

Jon Tan ทำสิ่งนี้กับไซต์ของเขา - http://jontangerine.com/ ทุกอย่างรวมถึงรูปภาพที่ประกาศในระบบ EMS ทุกอย่าง นี่คือวิธีที่ได้ผลที่ต้องการ การซูมข้อความและการซูมหน้าจอให้ผลลัพธ์ที่เหมือนกันเกือบทั้งหมด

— แอนดี้ฟอร์ด
แหล่งที่มา

1

CSS จะไม่สามารถซูมตามต้องการได้ แต่ถ้าคุณจับคู่ CSS กับ JS คุณสามารถเปลี่ยนค่าบางอย่างเพื่อทำให้หน้าดูใหญ่ขึ้น อย่างไรก็ตามตามที่ได้กล่าวไปแล้วคุณลักษณะนี้เป็นมาตรฐานในเบราว์เซอร์สมัยใหม่ทุกวันนี้: ไม่จำเป็นต้องทำซ้ำ ตามความเป็นจริงแล้วการทำซ้ำมันจะทำให้เว็บไซต์ของคุณช้าลง (มีหลายสิ่งที่จะโหลดมากขึ้น, JS หรือ CSS เพิ่มเติมเพื่อแยกวิเคราะห์หรือดำเนินการและนำไปใช้ ฯลฯ )

— T0xicCode
แหล่งที่มา

มันเป็นคุณสมบัติของเบราว์เซอร์มาตรฐาน แต่การเพิ่มคุณสมบัติลงในเว็บไซต์โดยตรงหมายความว่าคุณไม่จำเป็นต้องพึ่งพา (1) ความเชี่ยวชาญของผู้ใช้กับเบราว์เซอร์ที่เลือกและ (2) คำแนะนำเฉพาะเบราว์เซอร์

— Ags1

1

ฉันมีรหัสต่อไปนี้ที่ปรับขนาดทั้งหน้าผ่านคุณสมบัติ CSS สิ่งสำคัญคือการตั้งค่า body.style.width เป็นสิ่งที่ตรงกันข้ามกับการซูมเพื่อหลีกเลี่ยงการเลื่อนแนวนอน คุณต้องตั้งค่าจุดกำเนิดการแปลงเป็นด้านซ้ายบนเพื่อให้มุมบนซ้ายของเอกสารที่มุมบนซ้ายของหน้าต่าง

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }

— Ags1
แหล่งที่มา