meta viewport กับ fixed width

meta viewport กับ fixed width

ในยุคแรกเริ่มของเว็บ ขนาดหน้าจอยังมีไม่หลากหลายนัก ที่โดดเด่นใช้กันหลักๆก็แค่ 640*480 และ 800*600 ในยุคต่อมาก็เริ่มมี 1024*768 ดังนั้นในยุคเริ่มต้นนี้เราจึงใช้ Table และกำหนดความกว้างด้วย width="nn%" เป็นส่วนมาก โดย nn แทนตัวเลข เช่น width="100%" ต่อมา มอนิเตอร์อัตราส่วน 16:9 เริ่มแพร่หลายเข้ามา ทำให้ขนาดหน้าจอมีความหลากหลายมากขึ้น รวมทั้งมอนิเตอร์ขนาดใหญ่ขึ้นจนถึงยุคปัจจุบัน การออกแบบจึงไปลงตัวที่การกำหนดความกว้างแบบตายตัว โดยหลักๆก็จะใช้ div และกำหนด CSSเช่น margin: 0 auto; width:900px; เป็นต้น และยุคปัจจุบันที่กำลังคาบเกี่ยวไปสู่ยุคถัดไปนี้เอง ขนาดของมอนิเตอร์ไม่จำกัดแค่บน Desktop, Laptop แต่มันยังคงรวมไปถึงอุปกรณ์พกพาอย่างเช่นโทรศัพท์มือถือหรือ Tablet PC อีกด้วย

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

<meta viewport> <meta HandheldFriendly> element/attribute เหล่านี้จะมีบทบาทมากในเรื่องนี้

นำ fixwidth มาสู่หน้าจออุปกรณ์พกพา
ผมจะขอยกตัวอย่าง HTML+CSS ง่ายๆ เพื่อชี้ให้เห็นถึงปัญหา และทางแก้ (สำหรับคนที่อาจกำลังเจอปัญหานี้อยู่)

1
2
body {background: #eee; color: #000; font-family: tahoma, verdana; font-size: 12px; margin: 0; padding: 10px;}
.container {background: #fff; margin: 0 auto; padding: 10px; width: 960px;}

style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ทดสอบ mobile width.</title>
<meta http-equiv="cache-control" content="no-cache" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="container">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tellus massa, sollicitudin ut sagittis scelerisque, mollis non arcu.</p>
</div>
</body>
</html>

index.html

จากข้างบน เป็น HTML แบบเดิมๆ ที่ยังไม่พร้อมสำหรับอุปกรณ์พกพา เมื่อเรียกดูในอุปกรณ์เหล่านั้น จะพบว่าหน้ามันจะล้นต้องเลื่อนซ้ายขวากันวุ่นทีเดียว
การกำหนดความกว้างก็เป็นแบบธรรมดา คือใช้เป็น Pixel Width และ CSS Framework ทั่วไป และเมื่อเราเอา Meta Viewport มาใส่

1
2
body {background: #eee; color: #000; font-family: tahoma, verdana; font-size: 12px; margin: 0; padding: 10px;}
.container {background: #fff; margin: 0 auto; padding: 10px; width: 960px;}
style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ทดสอบ mobile width.</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="container">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tellus massa, sollicitudin ut sagittis scelerisque, mollis non arcu.</p>
</div>
</body>
</html>
index.html

ก็จะพบว่ามันไม่มีการเปลี่ยนแปลงอะไรเลย สาเหตุที่มันไม่แตกต่างจากเดิมก็เพราะว่าใน css นั้นยังกำหนดความกว้างเป็นแบบเดิมอยู่ คือ 960px Element Meta Viewport ที่กำหนดไว้ว่า width=device-width จึงไม่มีค่าอะไร

ทางแก้ไข คือ เปลี่ยนขนาดของ width ใน CSS เป็น % เช่น 90% และกำหนดขนาด max-width เป็น pixel เช่น 960px
เมื่อกำหนดดังนี้แล้ว เมื่อเปิดดูในอุปกรณ์พกพาที่หน้าจอขนาดเล็ก มันจะนับที่ % แต่ไม่เกิน 960px ซึ่งอุปกรณ์เหล่านี้ เช่น โทรศัพท์มือถือ มักมีความกว้างแค่ 320 px เท่านั้น มันจึงเกือบเต็มพอดีๆ
และเมื่อเปิดดูในมอนิเตอร์ใหญ่ๆที่หน้าจอกว้างกว่า 960px มันก็จะแสดงที่ 960px พอดี เพราะขนาดความกว้าง 90% มันเกิน max-width 960px ตัวอย่างสุดท้ายที่ใช้งานได้ดีสำหรับ monitor ใหญ่ๆและ อุปกรณ์พกพาเล็กๆ

1
2
body {background: #eee; color: #000; font-family: tahoma, verdana; font-size: 12px; margin: 0; padding: 10px;}
.container {background: #fff; margin: 0 auto; max-width: 960px; padding: 10px; width: 90%;}
style.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ทดสอบ mobile width.</title>
<meta http-equiv="cache-control" content="no-cache" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<link rel="stylesheet" type="text/css" href="style.css" media="all" />
</head>
<body>
<div class="container">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tellus massa, sollicitudin ut sagittis scelerisque, mollis non arcu.</p>
</div>
</body>
</html>
index.html

สุดท้ายนี้ พบว่ายังมีปัญหาอยู่บางอย่างที่ยังทำงานไม่ได้ในทุกๆเบราเซอร์ นั่นคือค่า Scale ต่างๆ และ user-scalable เพราะผู้ใช้ยังคง zoom in, zoom out ได้อย่างปกติ แต่จากการทดสอบใน Opera Mini พบว่าทำงานได้ดี
และเมื่อทางออกสำหรับ Meta Viewport กับ fixed width นี้คือการกำหนด width เป็น % และ max-width เป็น px แล้ว ดูเหมือนบรรดา CSS Framework จะกลายเป็นอุปสรรคสำหรับงานนี้ เพราะพวกนี้มักมาด้วย width เป็น px เสมอ ก็จะทำให้เจออุปสรรคอย่างในตัวอย่างที่สอง ดังนั้นผู้ใช้ CSS Framework จึงต้องหาทางออกสำหรับ Mobile Device กันต่อไปครับ.


แชร์บทความ

Facebook Twitter Google Digg Reddit LinkedIn StumbleUpon Email
กำลังโหลด ...