ในการศึกษาส่วนหน้าก่อนหน้านี้ ความเข้าใจในเมตาแท็กเป็นเพียงประโยคนี้เท่านั้น
<เมตาชุดอักขระ=UTF-8>
แต่เมื่อคุณเปิดเว็บไซต์ใดๆ จะมีคอลัมน์ของเมตาแท็กอยู่ในแท็กส่วนหัว ตัวอย่างเช่น เรามีเว็บไซต์ศิลปะการต่อสู้ VeVb แต่ฉันไม่คุ้นเคย ดังนั้นฉันจึงเพิ่มเมตาแท็กไว้ที่ด้านหน้าของแผนการเรียน
<meta name=viewport content=width=device-width, default-scale=1.0, maximum-scale=1.0, maximum-scale=1.0, user-scalable=no>
นี่เป็นคำสั่งที่ใช้บ่อยที่สุด ความกว้างและความสูงระบุความกว้างและความสูงของวิวพอร์ตตามลำดับ ค่าของพวกเขาคือตัวเลขเป็นพิกเซลหรือสัญลักษณ์เครื่องหมายพิเศษ คำสั่งความกว้างใช้แท็กความกว้างของอุปกรณ์เพื่อระบุว่าความกว้างวิวพอร์ตควรเป็นความกว้างหน้าจอของอุปกรณ์ ในทำนองเดียวกัน คำสั่งความสูงใช้แฟล็กความสูงของอุปกรณ์เพื่อระบุว่าความสูงของวิวพอร์ตคือความสูงของหน้าจอของอุปกรณ์
คำสั่งที่ผู้ใช้ปรับขนาดได้ระบุว่าผู้ใช้สามารถซูมวิวพอร์ตซึ่งก็คือมุมมองของหน้าเว็บได้หรือไม่ ค่าใช่ทำให้ผู้ใช้สามารถซูมได้ ค่าไม่ไม่อนุญาตให้ซูม
คำสั่งมาตราส่วนเริ่มต้นใช้เพื่อกำหนดมาตราส่วนเริ่มต้นของหน้าเว็บ ค่ามาตราส่วนเริ่มต้นเริ่มต้นจะแตกต่างกันไปตามเบราว์เซอร์ของสมาร์ทโฟน โดยปกติอุปกรณ์จะแสดงผลหน้าเว็บทั้งหมดในเบราว์เซอร์ การตั้งค่าเป็น 1.0 จะแสดงเอกสารเว็บที่ไม่ได้ปรับขนาด
คำสั่งมาตราส่วนสูงสุดและมาตราส่วนขั้นต่ำใช้เพื่อกำหนดขีดจำกัดของผู้ใช้ในอัตราส่วนการซูมของเว็บเพจ ค่าอยู่ระหว่าง 0.25 ถึง 10.0 เช่นเดียวกับมาตราส่วนเริ่มต้น ค่าของคำสั่งเหล่านี้คือการปรับขนาดที่ใช้กับเนื้อหาของวิวพอร์ต
เบราว์เซอร์สมาร์ทโฟนทั้งหมดรองรับคำสั่งความกว้างและขนาดผู้ใช้ของแท็ก ViewPort <meta> แต่ Opera Mobile ไม่ได้ใช้คำสั่งที่ปรับขนาดได้โดยผู้ใช้ แต่ให้เหตุผลว่าผู้ใช้ควรรักษาความสามารถในการซูมหน้าเว็บในเบราว์เซอร์มือถือได้เสมอ
ต่อไปนี้ไม่ค่อยได้ใช้จริงๆ อุปกรณ์อัตราส่วนพิกเซลwindow.devicePixelRatio คืออัตราส่วนของพิกเซลจริงต่อพิกเซลที่ไม่ขึ้นกับอุปกรณ์ (ค่าที่ตก) บนอุปกรณ์ นิพจน์ของสูตรคือ: window.devicePixelRatio = พิกเซล/dips
หน้าจอที่ปรับเปลี่ยนได้พอดีกับหน้าจอเว็บไซต์หากค่าของเนื้อหาน้อยกว่าหรือเท่ากับความกว้างของหน้าจอ เว็บไซต์ที่ปรับให้พอดีกับหน้าจอจะถูกปิด เว็บไซต์จะไม่ปรับขนาดตามขนาดเบราว์เซอร์
หากค่าของเนื้อหามากกว่าความกว้างของหน้าจอ ระบบจะเปิดใช้งานขนาดพอดีกับหน้าจอ
เกี่ยวข้องกับเบราว์เซอร์ของ Apple2015-07-08
<meta name=viewport content=minimal-ui>
ใน Safari บน iOS 7.1 คุณลักษณะ minimal-ui จะถูกเพิ่มลงในเมตาแท็ก เพื่อให้สามารถซ่อนแถบที่อยู่ด้านบนและแถบนำทางด้านล่างได้เมื่อโหลดหน้าเว็บ
<meta name=apple-mobile-web-app-capable content=yes>
ว่าจะเปิดใช้งานฟังก์ชั่น webapp หรือไม่ เว็บไซต์จะลบแถบเครื่องมือและแถบเมนูเริ่มต้นของ Apple ในโหมดเต็มหน้าจอ
<meta name=เนื้อหา apple-touch-fullscreen=yes>
เปิดใช้งานการรองรับโปรแกรมเว็บแอป
<meta name=format-detection content=telephone=no><meta name=format-detection content=email=no />
iPhone จะเพิ่มรูปแบบลิงก์ให้กับข้อความของคุณโดยอัตโนมัติ และคลิกที่หมายเลขเพื่อหมุนหมายเลขโดยอัตโนมัติ!
phone=no ละเว้นตัวเลขบนเพจและระบุว่าเป็นหมายเลขโทรศัพท์
โทรศัพท์=ใช่ เปิดการแปลงตัวเลขเป็นลิงค์ผ่านสายโทรศัพท์ โดยจะเปิดไว้ตามค่าเริ่มต้น!
<meta name=apple-mobile-web-app-status-bar-style content=default /><meta name=apple-mobile-web-app-status-bar-style content=black /><meta name=apple- mobile-web-app-status-bar-style content=black-translucent />
ควบคุมรูปแบบการแสดงแถบสถานะเริ่มต้น (สีขาว) สีดำ (สีดำ) สีดำโปร่งแสง (สีเทาโปร่งแสง)
แท็กลิงค์ apple-touch-iconหากตั้งค่า apple-mobile-web-app-capable เป็นใช่ คุณสามารถใช้ปุ่มเพิ่มไปที่หน้าจอโฮมเพื่อเพิ่มเว็บไซต์ไปที่หน้าจอโฮมบน iPhone, iPad และ iTouch Safari
ด้วยการตั้งค่าแท็ก apple-touch-icon ที่สอดคล้องกัน ไอคอนที่เพิ่มลงในหน้าจอหลักจะใช้รูปภาพที่เราระบุ
ต่อไปนี้คือการเลือกไอคอนที่เหมาะสมที่สุดสำหรับอุปกรณ์ ox ต่างๆ ขนาดเริ่มต้นสำหรับ iPhone คือ 60px, iPad คือ 76px และหน้าจอเรตินาจะคูณด้วย 2 เท่า
<link rel=apple-touch-icon href=touch-icon-iphone.png><link rel=apple-touch-icon size=76×76″ href=touch-icon-ipad.png><link rel=apple- ขนาดไอคอนสัมผัส=120×120″ href=touch-icon-iphone-retina.png><link rel=apple-touch-icon ขนาด=152×152″ href=touch-icon-ipad-retina.png>
ก่อน iOS7 ระบบจะเพิ่มเอฟเฟกต์พิเศษ (มุมโค้งมนและไฮไลท์) ให้กับไอคอนตามค่าเริ่มต้น หากคุณไม่ต้องการให้ระบบเพิ่มเอฟเฟกต์พิเศษ คุณสามารถใช้ apple-touch-icon-precomposed.png แทน apple-touch- ไอคอน.png
ลำดับความสำคัญของการใช้ไอคอนมีดังนี้:หากไม่มีไอคอนที่ตรงกับขนาดที่แนะนำสำหรับอุปกรณ์ที่เกี่ยวข้อง ระบบจะใช้ไอคอนที่มีขนาดใหญ่กว่าขนาดที่แนะนำแต่ใกล้กับขนาดที่แนะนำมากที่สุดก่อน
หากไม่มีไอคอนที่มีขนาดใหญ่กว่าขนาดที่แนะนำ ระบบจะเลือกไอคอนที่ใกล้เคียงกับขนาดที่แนะนำมากที่สุดก่อน
หากมีหลายไอคอนที่ตรงตามขนาดที่แนะนำ ไอคอนที่มีคำสำคัญที่เขียนไว้ล่วงหน้าจะถูกเลือกก่อน
หากคุณไม่ได้ระบุไอคอนโดยใช้แท็กลิงก์ในพื้นที่ ไอคอนจะค้นหาไอคอน png ที่นำหน้าด้วย apple-touch-icon ในไดเร็กทอรีรากของเว็บไซต์โดยอัตโนมัติ
หมายเหตุ: ios7 จะไม่เพิ่มเอฟเฟกต์พิเศษให้กับไอคอนอีกต่อไป ก่อนหน้า ios7 เอฟเฟกต์พิเศษจะถูกเพิ่มให้กับไอคอนตามค่าเริ่มต้น เว้นแต่ไอคอนจะมีคำสำคัญ -precomposed.png เป็นส่วนต่อท้าย อินเทอร์เน็ตเอ็กซ์พลอเรอร์ <meta http-equiv=X-UA-Compatible content=IE=edge> ป้องกันไม่ให้ IE ใช้โหมดความเข้ากันได้
<meta name=MobileOptimized content=320″> แท็กความกว้างคำจำกัดความที่กำหนดโดย Microsoft สำหรับเวอร์ชัน IE Mobile
เบราว์เซอร์จะไม่ปรับขนาดของไฟล์โดยอัตโนมัติ ซึ่งหมายความว่าเป็นขนาดคงที่ และจะไม่ขยายหรือปรับขนาดตามเบราว์เซอร์
<meta name=HandheldFriendly content=true /> : ไม่ว่าจะเป็นมิตรกับอุปกรณ์พกพา จริงหรือเท็จเท่านั้น
<meta name=screen-orientation content=portrait> บังคับหน้าจอแนวตั้ง
<meta name=full-screen content=yes> บังคับเต็มหน้าจอ
<meta name=browsermode content=application> โหมดแอปพลิเคชัน
<meta name=x5-orientation content=portrait> บังคับหน้าจอแนวตั้ง
<meta name=x5-fullscreen content=true> บังคับให้เต็มหน้าจอ
<meta name=x5-page-mode content=app> โหมดแอปพลิเคชัน
<meta name=renderer content=webkit> เปิดใช้งานโหมดรวดเร็ว
เมตาหมายถึงองค์ประกอบที่ให้ข้อมูลเมตาเกี่ยวกับหน้า เช่น คำอธิบายและคำสำคัญสำหรับเครื่องมือค้นหา และความถี่ในการอัปเดต แท็กอยู่ที่ส่วนหัวของเอกสารและไม่มีเนื้อหา คุณสมบัติของแท็กกำหนดคู่ชื่อ/ค่าที่เกี่ยวข้องกับเอกสาร
คุณสมบัติเฉพาะของรุ่นมือถือมีอะไรบ้าง?<meta content=width=device-width, default-scale=1.0, maximum-scale=1.0, user-scalable=0 name=viewport> <meta content=yes name=apple-mobile-web-app-capable> <meta เนื้อหา=ชื่อสีดำ=apple-mobile-web-app-status-bar-style> <เนื้อหาเมตา=โทรศัพท์=ไม่มีชื่อ=รูปแบบการตรวจจับ>
เมตาแท็กแรกหมายถึง: บังคับความกว้างของเอกสารให้เหลือความกว้างของอุปกรณ์เป็น 1:1 และอัตราส่วนความกว้างสูงสุดของเอกสารคือ 1.0 และผู้ใช้ไม่ได้รับอนุญาตให้คลิกบนหน้าจอเพื่อขยายมุมมอง
เมตาแท็กที่สองคือเมตาแท็กส่วนตัวของ Safari ในอุปกรณ์ iPhone ซึ่งหมายความว่า: อนุญาตให้เรียกดูโหมดเต็มหน้าจอ;
เมตาแท็กที่สามยังเป็นแท็กส่วนตัวของ iPhone ซึ่งระบุลักษณะของแถบสถานะที่ด้านบนสุดของ Safari ใน iPhone
สีของแถบสถานะ (แถบด้านบนของหน้าจอ) ในแอปพลิเคชันเว็บแอป
ค่าเริ่มต้นคือค่าเริ่มต้น (สีขาว) ซึ่งสามารถตั้งค่าเป็นสีดำ (สีดำ) และสีดำโปร่งแสง (สีเทาโปร่งแสง)
หมายเหตุ: หากค่าเป็นสีดำโปร่งแสง ค่านั้นจะครองตำแหน่ง px ของหน้าและลอยอยู่เหนือหน้า (จะครอบคลุมความสูงของหน้า 20px - หน้าจอ Retina ของ iphone4 และ itouch4 คือ 40px)เมตาแท็กที่สี่หมายถึง: บอกอุปกรณ์ให้ละเว้นตัวเลขบนหน้าเป็นหมายเลขโทรศัพท์
มาดูเมตาของหน้ามือถือของผู้ผลิตรายใหญ่กัน: 1. ทีมอลล์<meta name=aplus-terminal content=1/><meta name=apple-mobile-web-app-title content=TMALL/><meta name=apple-mobile-web-app-capable content=yes/><meta name=apple-mobile-web-app-status-bar-style content=black-translucent/><meta name=viewport เนื้อหา=ความกว้าง=ความกว้างของอุปกรณ์,มาตราส่วนเริ่มต้น=1,มาตราส่วนสูงสุด=1,ผู้ใช้ปรับขนาดได้=no/><meta name=format-detection content=telephone=no, address=no>2. เถาเป่า
<meta charset=utf-8><meta content=yes name=apple-mobile-web-app-capable/> <meta content=yes name=apple-touch-fullscreen/> <meta content=telephone=no,email= ไม่มีชื่อ=รูปแบบการตรวจจับ/> <ชื่อเมตา=เนื้อหาการกำหนดค่าแอป=เต็มหน้าจอ=ใช่,useHistoryState=ใช่,การเปลี่ยนผ่าน=ใช่/><ชื่อเมตา=วิวพอร์ต เนื้อหา=มาตราส่วนเริ่มต้น=0.5, มาตราส่วนสูงสุด=0.5, มาตราส่วนขั้นต่ำ=0.5, ผู้ใช้ปรับขนาดได้=no>3. จิงตง
<title>เวอร์ชัน Jingdong-Mobile</title><meta name=viewport content=width=device-width, Initial-scale=1.0, maximum-scale=1.0, user-scalable=0;><meta http-equiv=Content -พิมพ์ content=text/html; charset=GBK><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=format-detection content=telephone=no><meta http-equiv=เนื้อหาหมดอายุ=-1><meta http-equiv= เนื้อหาการควบคุมแคช=no-cache><meta http-equiv=Pragma content=no-cache><meta name=เนื้อหาคำหลัก=><meta name=เนื้อหาคำอธิบาย=>4. เน็ตอีส
<title>NetEase Mobile</title><meta name=viewport content=width=device-width,initial-scale=1, maximum-scale=1, Minimum-scale=1, user-scalable=no><meta content = โทรศัพท์=ไม่มีชื่อ=รูปแบบการตรวจจับ /><ชื่อเมตา=เนื้อหาคำหลัก= /><ชื่อเมตา=เนื้อหาคำอธิบาย= />5. ไป่ตู้
<meta name=referrer content=always><meta charset=utf-8><meta name=viewport content=width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no><meta ชื่อ = เนื้อหาการตรวจจับรูปแบบ = โทรศัพท์ = ไม่ใช่>6. โซฮู
<title>มือถือ Sohu.com</title> <meta http-equiv=Content-Type content=text/html; charset=utf-8 /><meta http-equiv=Cache-Control content=no-cache />< ชื่อเมตา = เนื้อหาวิวพอร์ต = ความกว้าง = ความกว้างของอุปกรณ์, ผู้ใช้ปรับขนาดได้ = ไม่, ขนาดเริ่มต้น = 1.0, ขนาดสูงสุด = 1.0, ขนาดต่ำสุด = 1.0 /><meta name=เนื้อหาที่เพิ่มประสิทธิภาพมือถือ=320/><meta name=description content= /><meta name=keywords content= />
-
จำลองหน้าเว็บบนมือถือ<meta name=viewport content=width=device-width,user-scalable=no, default-scale=1.0, maximum-scale=1.0, maximum-scale=1.0″>
วิวพอร์ต -> หน้าต่าง (พื้นที่แสดงผล)
width=ความกว้างของอุปกรณ์-ความกว้างของอุปกรณ์
วิวพอร์ต<metaname = 'วิวพอร์ต 'เนื้อหา = ความกว้าง=320><metaname = 'วิวพอร์ต 'เนื้อหา = ความกว้าง=ความกว้างของอุปกรณ์>
user-scalable=no/0 ว่าจะอนุญาตการปรับขนาดหรือไม่
มาตราส่วนเริ่มต้น=1.0 ค่าเริ่มต้น
สเกลสูงสุด=1.0
สเกลขั้นต่ำ=1.0
-
<meta name=viewport content=width=device-width, user-scalable=no>
user-scalable=no/0 ปิดการใช้งานผู้ใช้จากการปรับขนาดหน้า
<meta name=viewport content=width=device-width, user-scalable=no, default-scale=1.0″>
Initial-scale=1.0 เริ่มต้นอัตราส่วนการซูมหน้า
<meta name=viewport content=width=device-width, default-scale=1.0, maximum-scale=1.0, user-scalable=0″>
maximum-scale=1.0 อัตราสเกลสูงสุด (สำหรับโทรศัพท์มือถือ Huawei Meta8 แต่ละรุ่น)
-
เมตาเฉพาะอุปกรณ์ Apple:<!—อนุญาตให้หน้าเว็บทำงานเป็นแอป (อนุญาตให้เพิ่มไปยังหน้าจอหลัก)—><meta name=apple-mobile-web-app-capable content=yes><!—สีแถบสถานะ—><meta name=apple- มือถือ -web-app-status-bar-style content=black>เมตาจิงตง:
<meta name=viewport content=width=device-width, default-scale=1.0, maximum-scale=1.0, user-scalable=0″><meta name=apple-mobile-web-app-capable content=yes>< meta name=apple-mobile-web-app-status-bar-style content=black><!—หมายเลขโทรศัพท์และที่อยู่อีเมลต้องห้าม—><meta name=format-detection เนื้อหา=โทรศัพท์=ไม่ อีเมล=ไม่>เมตา Taobao:
<meta content=yes name=apple-mobile-web-app-capable><!–คลิกพื้นที่หน้าเพื่อแสดงแบบเต็มหน้าจอ—><meta content=yes name=apple-touch-fullscreen/><meta content=telephone =no,email =no name=format-detection/><!–ข้อมูลแอปพลิเคชัน, เก็บประวัติระบบ, เอฟเฟกต์การเคลื่อนไหว–><meta name=เนื้อหา App-Config=fullscreen=yes,useHistoryState=yes,transition=yes/>เมตาอื่น ๆ :
<!–บังคับให้เบราว์เซอร์ 360 ใช้เคอร์เนล Chrome เพื่อแสดงผลหน้า–><meta name=renderer content=webkit><!–ลองใช้โหมดล่าสุดของ IE เพื่อแสดงผล–><meta http-equiv=X-UA -Compatible content=IE= edge><!–ปรับให้เหมาะสมสำหรับอุปกรณ์มือถือ ส่วนใหญ่สำหรับเบราว์เซอร์เก่าบางรุ่นที่ไม่รู้จักวิวพอร์ต เช่น BlackBerry–><meta name=HandheldFriendly content=true><!–เบราว์เซอร์เก่าของ Microsoft–><meta name=MobileOptimized content=320″><!– uc บังคับหน้าจอแนวตั้ง–><meta name=เนื้อหาการวางแนวหน้าจอ=แนวตั้ง><!– QQ บังคับหน้าจอแนวตั้ง –><meta name=x5-orientation content=Portrait><!– UC บังคับให้แสดงแบบเต็มหน้าจอ–><meta name=เนื้อหาเต็มหน้าจอ=yes><!– QQ บังคับให้แสดงแบบเต็มหน้าจอ–><meta name=x5-fullscreen content=true><!– โหมดแอปพลิเคชัน UC–><meta name=browsermode content=application><!– โหมดแอปพลิเคชัน QQ–><meta name=x5-page- เนื้อหาโหมด = แอป>สรุป
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่าเนื้อหาของบทความนี้จะมีคุณค่าอ้างอิงสำหรับการศึกษาหรือการทำงานของทุกคน หากคุณมีคำถามใด ๆ คุณสามารถฝากข้อความไว้เพื่อการสื่อสารได้ เครือข่าย.