ความคิดเห็น: บรรณาธิการของบทความนี้จะแนะนำวิธีใช้ HTML5 เพื่อให้ได้การสนับสนุนเว็บไซต์ใน Windows 8 หากคุณต้องการโปรดดูที่มัน
ก่อนอื่นมาเรียนรู้เกี่ยวกับการสนับสนุนของ Windows 8 แอพพลิเคชั่นเมโทรใน Windows 8 สามารถแยกหน้าจอได้เป็นอย่างดี รูปต่อไปนี้
สิ่งนี้ช่วยให้ผู้ใช้สามารถสลับได้อย่างง่ายดายในระหว่างการใช้งาน ระบบยังมีกฎระเบียบที่เข้มงวดเกี่ยวกับสิ่งที่แนบมา ส่วนใหญ่สองหน้าจอหนึ่งมีขนาดใหญ่และอีกหน้าจอเล็ก และความกว้างของหน้าจอขนาดเล็กได้รับการแก้ไขที่ 320 พิกเซล
ดังนั้นเมื่อผู้ใช้โพสต์เว็บไซต์ลงในหน้าจอขนาดเล็กหน้าจะลดลงตามสัดส่วนตามค่าเริ่มต้น ดังที่แสดงในรูปด้านล่าง:
แล้วเราจะแก้ปัญหาดังกล่าวได้อย่างไร? สิ่งที่เกี่ยวกับการทำให้เว็บไซต์แสดงเอฟเฟกต์ที่เป็นมิตรมากภายใต้หน้าจอขนาดเล็กของ Windows 8? ด้านล่างฉันมีตัวอย่างง่ายๆ
ดังที่แสดงในภาพหน้าง่ายและดั้งเดิมรวมถึงการนำทางที่จัดเรียงในแนวนอนเนื้อหา ฯลฯ
และเช่นเดียวกับรหัสดั้งเดิม
<! doctype html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<title> </title>
<style>
.nav {
Padding: 5px 0px 5px 0px;
มาร์จิ้น: 0px;
ความกว้าง: 100%;
ประเภทรายการประเภท: ไม่มี;
พื้นหลังสี: #cddcd6;
ความสูง: 28px;
-
.nav li {
มาร์จิ้น: 0px 1px 0px 0px;
ลอย: ซ้าย;
พื้นหลังสี: #0094ff;
Padding: 5px 10px 5px 10px;
-
.dvitem {
ความกว้าง: 100%;
ความสูง: 400px;
พื้นหลังสี: #B6FF00;
ชัดเจน: ทั้งสอง;
-
.หลัก {
ความกว้าง: 960px;
มาร์จิ้น: 0px auto 0px auto;
-
</style>
</head>
<body>
<div>
<ul>
<li> บ้าน </li>
<li> item1 </li>
<li> item2 </li>
<li> item3 </li>
<li> item4 </li>
</ul>
<div>
</div>
</div>
</body>
</html>
หน้าดังกล่าวจะลดลงในเอฟเฟกต์การติดดังแสดงในรูป:
จะแก้ไขได้อย่างไร? ในหน้าดั้งเดิมเช่นนี้เราเพียงแค่ต้องเขียน CSS ตามลักษณะการถ่ายทอดของ Windows 8 ปล่อยให้หน้าของเราวางและแสดงที่ความกว้าง 320 พิกเซล
รหัสการใช้งานมีดังนี้: เพิ่มรหัสสไตล์ต่อไปนี้ในหน้าต้นฉบับ
หน้าจอ @media และ (สูงสุด-ความกว้าง: 320px) {
@-ms-viewport {Width: 320px; -
.nav {
Padding: 5px 0px 5px 0px;
มาร์จิ้น: 0px;
ความกว้าง: 100%; พื้นหลังสี: #FFF;
-
.nav li {
ความกว้าง: 300px;
ชัดเจน: ทั้งสอง;
มาร์จิ้น: 0PX 0PX 1PX 0PX;
พื้นหลังสี: #0094ff;
Padding: 5px 0px 5px 0px;
-
.dvitem {
ความกว้าง: 95%;
ความสูง: 600px;
พื้นหลังสี: #FF00A4;
ชัดเจน: ทั้งสอง;
-
.หลัก {
ความกว้าง: 320px;
มาร์จิ้น: 0px auto 0px auto;
-
-
ไม่มีความแตกต่างระหว่างการท่องเว็บเต็มหน้าจอและการท่องเว็บแบบดั้งเดิม
ความแตกต่างคือเอฟเฟกต์การแสดงผลนั้นชัดเจนเมื่อคุณติดกับหน้าจอขนาดเล็กดังที่แสดงในรูปต่อไปนี้
ตัวอย่างรหัสนี้ดาวน์โหลด/ไฟล์/ความเสี่ยง/index.rar