ผลข้างเคียงของการลบ“ width = ความกว้างของอุปกรณ์” ออกจากเมตาแท็กของวิวพอร์ตเมื่อตั้งค่า“ initial-scale = 1.0”

แม้ว่า<meta name="viewport">แท็กนั้นจะไม่ได้มาตรฐาน แต่ก็เป็น "เบราว์เซอร์มือถือส่วนใหญ่นับถือ

ข้อเสียอย่างหนึ่งที่ไม่ใช่มาตรฐานเว็บจริงคือเอกสารรายละเอียดไม่สามารถใช้ได้เหมือนมาตรฐานอื่น ๆ คณะทำงาน CSSมีข้อกำหนดสำหรับนี้จึงเป็นสิ่งที่ผมกำลังส่วนใหญ่ใช้เป็นที่ทำงานเผด็จการ

คำถามหลักของฉันคือ:

อะไรคือความแตกต่างที่รับรู้ระหว่างการประกาศต่อไปนี้

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<meta name="viewport" content="initial-scale=1.0">

ถามอีกทางหนึ่งอะไรคือความแตกต่างระหว่าง@viewport CSS กับกฎเหล่านี้:

/* Translated from <meta name="viewport" content="width=device-width, initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: 100vw;
}

/* Translated from <meta name="viewport" content="initial-scale=1.0"> */
@viewport {
    zoom: 1.0;
    min-width: extend-to-zoom;
    max-width: extend-to-zoom;
}

ฉันมาถึงที่การ@viewportแปลเหล่านั้นได้อย่างไร:

width=device-width ถึง min-width: extend-to-zoom; max-width: 100vw;

อุปกรณ์ CSS ปรับตัวโมดูลระดับ 1 เอกสารฯ :

widthและheightวิวพอร์ต<META>คุณสมบัติจะถูกแปลงwidthและheightอธิบายการตั้งค่าmin-width/ min-heightมูลค่าให้กับextend-to-zoomและmax-width/ max-heightมูลค่าให้กับความยาวจากวิวพอร์ต

พวกเขาให้ตัวอย่างเพิ่มเติม :

<META>องค์ประกอบนี้:

<meta name="viewport" content="width=500, height=600">

แปลเป็น:

@viewport {
    width: extend-to-zoom 500px;
    height: extend-to-zoom 600px;
}

ตัวบอกwidthชวเลขอธิบายว่า:

นี่คือคำอธิบายที่จดชวเลขสำหรับการตั้งค่าทั้งสองและmin-width ค่าmax-widthหนึ่ง<viewport-length>จะตั้งค่าทั้งสองmin-widthและmax-widthเป็นค่านั้น <viewport-length>ค่าสองค่าจะถูกตั้งค่าเป็นค่าmin-widthแรกและmax-widthค่าที่สอง

ดังนั้นมันยืนเพื่อเหตุผลที่เทียบเท่ากับwidth: extend-to-zoom 500px;min-width: extend-to-zoom; max-width: 500px;

ที่เหลือเพียง100vwส่วนหนึ่งเท่านั้น ภายในส่วนที่ 10.4พวกเขาอธิบาย:

device-widthและdevice-heightแปลเป็น 100vw และ 100vh ตามลำดับ

ดังนั้นในที่สุดเราก็จะเห็นว่าwidth=device-widthมีการแปลmin-width: extend-to-zoom; max-width: 100vw;อย่างไร

initial-scale=1.0 ถึง zoom: 1.0; width: extend-to-zoom;

อันนี้เป็นตัวอย่างของคำต่อคำ :

<META>องค์ประกอบนี้:

<meta name="viewport" content="initial-scale=1.0">

แปลเป็น:

@viewport {
    zoom: 1.0;
    width: extend-to-zoom;
}

คำถามอื่น ๆ ที่ฉันมีที่นี่คือสิ่งที่ว่าเป็นextend-to-zoomค่า?

เอกสารเกี่ยวกับมันและขั้นตอนความละเอียดเป็นเรื่องยากที่จะเข้าใจ หากใครสามารถชี้ให้ฉันดูตัวอย่างเพิ่มเติมเกี่ยวกับเรื่องนี้ที่จะได้รับการชื่นชมอย่างมาก

นอกเหนือจากทุกสิ่งข้างต้นฉันได้รวบรวมเว็บไซต์ด่วน - https://romellem.github.io/temp-site/viewport/ - เพื่อทดสอบการกำหนดค่าวิวพอร์ตบางอย่าง

กล่าวคือ:

• content = "width = ความกว้างของอุปกรณ์, ขนาดเริ่มต้น = 1.0"
• เนื้อหา = "เริ่มต้นขนาด = 1.0"

สิ่งนี้อาจช่วยในการทดสอบ

ก่อนที่เราจะเจาะลึกลงไปในสิ่งที่คุณขอมาตรวจสอบเล็กน้อยเกี่ยวกับสาเหตุที่viewportเมตาแท็กมีอยู่ตั้งแต่แรก นี่คือสิ่งที่ฉันรวบรวม

ทำไมเราต้องมีviewportแท็ก

วิวพอร์ตเป็นพื้นที่ที่สามารถดูเนื้อหาเว็บได้ โดยปกติแล้วหน้าที่แสดงผล (เนื้อหาเว็บ) จะใหญ่กว่าวิวพอร์ต ดังนั้นเรามักจะใช้แถบเลื่อนเพื่อดูเนื้อหาที่ซ่อนอยู่ (เนื่องจากวิวพอร์ตไม่สามารถแสดงทุกอย่างได้) อ้างอิงจาก CSS Device Adaptation Module Level 1 :

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

ในอุปกรณ์มือถือ (และอุปกรณ์ขนาดเล็กอื่น ๆ ) บล็อกเริ่มต้นที่ประกอบด้วยมักจะมีขนาดใหญ่กว่าวิวพอร์ต ยกตัวอย่างเช่นโทรศัพท์มือถือที่มีความกว้างหน้าจออาจมีบล็อกที่มีการเริ่มต้นของ640px 980pxในกรณีนี้บล็อกที่มีการเริ่มต้นหดตัวเพื่อ640pxให้สามารถใส่ลงในหน้าจอมือถือ 640pxความกว้างนี้(ความกว้างหน้าจอ) คือสิ่งที่เรียกว่าinitial-widthวิวพอร์ตซึ่งจะเกี่ยวข้องกับการสนทนาของเรา

ดังนั้น .... เราต้องใช้viewportแท็กนี้ทำไม ทุกวันนี้เรามีคำสั่งสื่อที่ช่วยให้เราสามารถออกแบบสำหรับอุปกรณ์มือถือ อย่างไรก็ตามเคียวรีสื่อบันทึกนี้ขึ้นอยู่กับความกว้างของวิวพอร์ตที่แท้จริง ในอุปกรณ์มือถือเอเจนต์ผู้ใช้จะกำหนดขนาดวิวพอร์ตเริ่มต้นเป็นขนาดคงที่ที่แตกต่างกันโดยอัตโนมัติ (โดยปกติจะใหญ่กว่าขนาดวิวพอร์ตเริ่มต้น) ดังนั้นหากความกว้างของวิวพอร์ตของอุปกรณ์มือถือได้รับการแก้ไขกฎ CSS ที่เราใช้ในการสืบค้นสื่อจะไม่ถูกดำเนินการเพียงเพราะความกว้างของวิวพอร์ตไม่เปลี่ยนแปลง การใช้viewportแท็กเราสามารถควบคุมจริงความกว้างของ viewport (หลังจากที่ถูกเรียกขานโดย UA) ยกมาจาก MDN :

อย่างไรก็ตามกลไกนี้ไม่เหมาะสำหรับหน้าเว็บที่ปรับให้เหมาะกับหน้าจอที่แคบโดยใช้การสืบค้นสื่อ - หากวิวพอร์ตเสมือนเป็น 980px ตัวอย่างเช่นการสืบค้นสื่อที่เตะที่ 640px หรือ 480px หรือน้อยกว่านั้นจะไม่ถูกนำมาใช้ เทคนิคการออกแบบที่ตอบสนอง

โปรดทราบว่าviewportแท็กสามารถเปลี่ยนความสูงของวิวพอร์ตที่เกิดขึ้นจริงได้เช่นกันไม่ใช่แค่ความกว้าง

viewport แท็ก width

widthในviewportแท็กจะแปลให้max-widthอยู่ใน@viewportกฎ เมื่อคุณประกาศwidthเป็นdevice-widthมันจะถูกแปลเป็น100%ใน@viewportกฎ ค่าร้อยละจะได้รับการแก้ไขขึ้นอยู่initial-widthกับวิวพอร์ต ดังนั้นหากเรายังคงใช้ตัวอย่างข้างต้นจะแก้ไขค่าเป็นmax-width ในขณะที่คุณได้พบออกมานี้เพียงระบุ640px จะถูกโดยอัตโนมัติmax-widthmin-widthextend-to-zoom

extend-to-zoom

คำถามของคุณคือมูลค่าของการขยายเพื่อซูมเท่าไร จากสิ่งที่ฉันรวบรวมมันเป็นค่าที่ใช้เพื่อสนับสนุนวิวพอร์ตที่ขยายตัวเองเพื่อให้พอดีกับพื้นที่การดูในระดับการซูมที่กำหนด กล่าวอีกนัยหนึ่งมันเป็นค่าขนาดวิวพอร์ตที่เปลี่ยนไปตามค่าการซูมที่ระบุ ตัวอย่าง? ระบุว่าmax-zoomมูลค่าของสไตล์ UA มี5.0และinitial-widthเป็น320px, จะแก้เพื่อความกว้างที่เกิดขึ้นจริงเริ่มต้นของ<meta name="viewport" content="width=10"> 64pxเรื่องนี้สมเหตุสมผลเพราะหากอุปกรณ์มีเพียง 320px และสามารถซูม5xค่าปกติเท่านั้นขนาดวิวพอร์ตขั้นต่ำจะเป็น320px divided by 5ซึ่งหมายถึงการแสดงเพียงครั้งละ 64px ( และไม่ใช่ 10pxเพราะนั่นต้องใช้การซูม 32x!) ค่านี้จะถูกใช้โดยอัลกอริทึมเพื่อกำหนดวิธีการขยาย (เปลี่ยน) min-widthและmax-widthค่าซึ่งจะมีบทบาทในการกำหนดความกว้างวิวพอร์ตที่แท้จริง

วางมันทั้งหมดเข้าด้วยกัน

ความแตกต่างระหว่าง<meta name="viewport" content="width=device-width, initial-scale=1.0">และ<meta name="viewport" content="initial-scale=1.0">คืออะไร? เพียงทำซ้ำขั้นตอนของอัลกอริทึม (อันนี้และอันนี้ ) ลองทำอย่างหลัง (อันที่ไม่มีwidthแอตทริบิวต์) ก่อน (เราจะสมมติว่าinitial-widthวิวพอร์ตคือ640px)

• widthไม่ได้ตั้งค่าซึ่งจะส่งผลmax-widthและmin-widthอยู่extend-to-zoomใน@viewportกฎ
• initial-scale1.0เป็น ซึ่งหมายความว่าzoomค่านี้ยังเป็น1.0
• มาแก้ไขextend-to-zoomกันเถอะ ขั้นตอน:
  1. extend-zoom = MIN(zoom, max-zoom). การดำเนินการแก้ไขเพื่อให้มีค่าที่ไม่ใช่MIN autoที่นี่zoomเป็น1.0และเป็นmax-zoom autoซึ่งหมายความว่าextend-zoomเป็น1.0
  2. extend-width = initial-width / extend-zoom. มันง่ายมาก หาร 640 ด้วย 1 คุณจะได้extend-widthเท่ากับ640
  3. เนื่องจากextend-zoomไม่ใช่ - autoเราจะข้ามไปยังเงื่อนไขที่สอง max-widthย่อมextend-to-zoomหมายถึงการที่จะถูกตั้งค่าmax-width extend-widthดังนั้น,max-width = 640
  4. min-widthนอกจากนี้ยังextend-to-zoomหมายถึงการตั้งค่านี้จะmin-width max-widthเราได้รับmin-width = 640
• หลังจากการแก้ไขไม่ใช่auto (คือextend-to-zoom) ค่าและmax-width min-widthเราสามารถดำเนินการขั้นตอนต่อไป เพราะmin-widthหรือmax-widthไม่autoเราจะใช้เป็นครั้งแรกifในขั้นตอนที่ทำให้การตั้งค่าวิวพอร์ตจริงเริ่มต้นwidthที่จะซึ่งเท่ากับMAX(min-width, MIN(max-width, initial-width)) MAX(640, MIN(640, 640))สิ่งนี้จะแก้ไขเป็น640สำหรับวิวพอร์ตจริงเริ่มต้นของคุณwidth
• ย้ายไปยังขั้นตอนต่อไป ในขั้นตอนนี้ไม่ได้width autoค่าจะไม่เปลี่ยนแปลงและเราลงท้ายด้วยวิวพอร์ตจริงwidthของ640px

มาทำอดีตกันก่อน

• widthมีการตั้งค่าผลลัพธ์นี้max-widthจะเป็น100%( 640pxในกรณีของเรา) และmin-widthอยู่extend-to-zoomใน@viewportกฎ
• initial-scale1.0เป็น ซึ่งหมายความว่าzoomค่านี้ยังเป็น1.0
• มาแก้ไขextend-to-zoomกันเถอะ ถ้าคุณทำตามขั้นตอนอย่างระมัดระวัง (เกือบจะเหมือนกับข้างต้น), คุณจะจบลงด้วยmax-widthของ640pxและของmin-width640px
• คุณอาจเห็นรูปแบบได้แล้ว 640pxเราจะได้รับความกว้างวิวพอร์ตที่แท้จริงของ

ดังนั้นความแตกต่างที่รับรู้คืออะไร? ไม่มีหลัก พวกเขาทั้งสองทำสิ่งเดียวกัน หวังว่าคำอธิบายของฉันจะช่วยได้ ;-) หากมีอะไรผิดปกติบอกฉันหน่อย