ชุมชนออนไลน์ หาเพื่อนคุย รวมเกมส์ ดูดวง ฟังเพลง ฟุตบอล ดารา และอีกมากมาย

General Category => มุมเว็บมาสเตอร์ไทย => ข้อความที่เริ่มโดย: Adminis ที่ มีนาคม 12, 2015, 06:01:17 PM

หัวข้อ: เขียนให้รองรับอุปกรณ์หลายๆหน้าจอ
เริ่มหัวข้อโดย: Adminis ที่ มีนาคม 12, 2015, 06:01:17 PM
Responsive Design เขียนให้รองรับอุปกรณ์หลายๆหน้าจอ ตอนที่ 1

การเขียนเพื่อให้รองรับการทำงานนี้ อย่างแรกต้องนำโค้ด html นี้ไปใส่ไว้ในแท็ก <head> เสียก่อน

เริ่มโค๊ด
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1"/>
จบโค๊ด

ใน bootstrap ใช้โค๊ด
เริ่มโค๊ด
    <meta name="viewport" content="width=device-width, initial-scale=1">
จบโค๊ด

จากนั้นนำโค้ด css ด้านล่างไปเขียนในเว็บไซต์ของคุณ เพื่อให้แสดงผลตามหน้าจอที่เราต้องการ
แนวทางการเขียน CSS  ในเว็บไซต์ไม่ควรกำหนดอะไรที่ตายตัวจนเกินไป
สำหรับเนื้อหาหรือส่วนที่ต้องแสดงผลสมาทโฟนและแท็บเล็ต
ถ้าเป็นไปได้ให้กำหนดความกว้างเป็น % เข้า
ให้มีเพียงแต่โครงสร้างหลัก ๆ เท่านั้นที่กำหนดตายตัวลงไป

Responsive Design เขียนให้รองรับอุปกรณ์หลายๆหน้าจอ
อ่านต่อ....
http://www.worldphp.com/blogs/5174f79b04546/Responsive-Design-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%A3%E0%B8%AD%E0%B8%87%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%AD%E0%B8%B8%E0%B8%9B%E0%B8%81%E0%B8%A3%E0%B8%93%E0%B9%8C%E0%B8%AB%E0%B8%A5%E0%B8%B2%E0%B8%A2%E0%B9%86%E0%B8%AB%E0%B8%99%E0%B9%89%E0%B8%B2%E0%B8%88%E0%B8%AD-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1.html#.VQFyQHyUe4w (http://www.worldphp.com/blogs/5174f79b04546/Responsive-Design-%E0%B9%80%E0%B8%82%E0%B8%B5%E0%B8%A2%E0%B8%99%E0%B9%83%E0%B8%AB%E0%B9%89%E0%B8%A3%E0%B8%AD%E0%B8%87%E0%B8%A3%E0%B8%B1%E0%B8%9A%E0%B8%AD%E0%B8%B8%E0%B8%9B%E0%B8%81%E0%B8%A3%E0%B8%93%E0%B9%8C%E0%B8%AB%E0%B8%A5%E0%B8%B2%E0%B8%A2%E0%B9%86%E0%B8%AB%E0%B8%99%E0%B9%89%E0%B8%B2%E0%B8%88%E0%B8%AD-%E0%B8%95%E0%B8%AD%E0%B8%99%E0%B8%97%E0%B8%B5%E0%B9%88-1.html#.VQFyQHyUe4w)