CSS Device Mockup: วาดโทรศัพท์/แท็บเล็ต/แล็ปท็อปด้วย CSS มาค่า
ใช้ border, border-radius, ::after (ปุ่ม Home) และ iframe แสดงเว็บไซต์จริงภายในหน้าจอ จำลองรูปลักษณ์อุปกรณ์จริง
โค้ดตัวอย่าง (Mobile)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.mobileDevice {
position: relative; width: 360px; height: 400px; margin: auto;
border: 16px rgb(7, 80, 35) solid;
border-top-width: 60px; border-bottom-width: 60px;
border-radius: 36px;
}
.mobileDevice::after {
content: ''; display: block; width: 35px; height: 35px;
position: absolute; left: 50%; bottom: -65px;
transform: translate(-50%, -50%);
background: #333; border-radius: 50%; border: 2px solid rgb(200, 255, 0);
}
.mobileDevice .screen {
width: 360px; height: 400px; background: white;
}
</style>
</head>
<body>
<h1 style="text-align: center;">ตัวอย่าง Device Mockup</h1>
<div class="mobileDevice">
<div class="screen">
<iframe src="https://wikipedia.org/" style="width:100%;border:none;height:100%" />
</div>
</div>
</body>
</html>ขยายเป็น Tablet / Laptop
- Tablet: กว้างกว่า (~768px), border-radius น้อยลง, ไม่มีปุ่ม Home
- Laptop: เพิ่มคีย์บอร์ด (div แยก), hinge (เส้นแบนกลาง), trackpad, webcam notch
- ใช้
transform: scale(0.5)บน container เพื่อย่อขนาดแสดงหลายอุปกรณ์พร้อมกัน
เครื่องมือสำเร็จรูป
- devices.css (marvelapp/devices.css) – CSS only device frames
- Phone Mockup Generators – ออนไลน์ สร้างรูป PNG/SVG
- Figma/Sketch plugins – สำหรับ Design handoff
เหมาะสำหรับ Portfolio, Landing Page แสดงแอป/เว็บ Responsive, Documentation
