วิธีทำให้เว็บไซต์ของคุณเหมาะสำหรับผู้ใช้มือถือ

มันชัดเจน: ตอนนี้เราใช้มากมาร์ทโฟนและแท็บเล็ตในการท่องอินเทอร์เน็ต ดังนั้นคุณต้องแน่ใจว่าเว็บไซต์ของคุณดูดีบนอุปกรณ์เหล่านั้นด้วย แต่คุณจะทำเช่นนั้นในทางปฏิบัติอย่างไร

การออกแบบที่ตอบสนอง

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

กล่าวโดยย่อคือวิธีการที่คุณรวมกฎสไตล์พิเศษไว้ในสไตล์ชีตของคุณสำหรับทุกส่วนที่ต้องมีรูปลักษณ์ที่แตกต่างเมื่อหน้าจอแคบลงหรือกว้างขึ้น ในกฎลักษณะพิเศษนั้นคุณจะต้องระบุว่าควรใช้กฎนั้นเมื่อใดและการเปลี่ยนแปลงเหล่านั้นควรหมายถึงอะไร

ตัวอย่าง

ฉัน’ ม. แน่ใจว่าตัวอย่างที่จะทำให้เรื่องนี้เล็ก ๆ น้อย ๆ ที่ชัดเจน สมมติว่าฉันได้ตั้งค่าส่วนข้อความของเว็บไซต์ของฉัน (องค์ประกอบบทความ) เพื่อครอบครอง 80% ของความกว้างของหน้าจอ (ความกว้าง: 80%;) หากมีคนดูที่เว็บไซต์ของฉันด้วยความละเอียดหน้าจอ 1366 x 768 พิกเซลส่วนข้อความของเว็บไซต์ของฉันจะปรากฏที่ความกว้าง 1,093 พิกเซล (80% ของ 1366) แต่ถ้าเขาดูด้วยความละเอียดหน้าจอที่ 1920 x 1080 พิกเซลส่วนนั้นก็จะกว้าง 1536 พิกเซล ฉันคิดว่ามันกว้างเกินไป (เส้นยาวเกินไปและข้อความอ่านยาก)

สิ่งที่ฉันต้องการคือองค์ประกอบของบทความจะใช้หน้าจอ 80% เมื่อไซต์ของฉันดูที่ความละเอียดหน้าจอ 1440 พิกเซลกว้างหรือต่ำกว่าและ 65% เมื่อความละเอียดหน้าจอสูงขึ้น หากหน้าจอแคบมาก (เช่นน้อยกว่า 800 พิกเซล) บทความอาจใช้หน้าจอ 95% แทนที่จะเป็น 80% มาตรฐาน เพื่อที่จะทำนี้ฉัน’ จะใส่ต่อไปนี้ในแผ่นสไตล์ของฉัน:

        บทความ {ความกว้าง: 80%; }

        หน้าจอ @ สื่อและ (ความกว้างต่ำสุด: 1441px) {

            บทความ {width: 65%; }

        }

        หน้าจอ @ สื่อและ (ความกว้างสูงสุด: 800px) {

            บทความ {ความกว้าง: 95%; }

        }

ด้วยกฎสไตล์เหล่านี้ฉันระบุว่าปกติแล้วองค์ประกอบของบทความจะมีความกว้าง 80% ของหน้าจอ เว้นเสียแต่ว่าจอแสดงผลจะกว้างกว่า 1440 พิกเซล (ความกว้างต่ำสุด: 1441px) หรือแคบกว่า 800 พิกเซล (ความกว้างสูงสุด: 800px) จากนั้นส่วนที่เหมือนกันจะได้รับองค์ประกอบของบทความที่มีความกว้าง 65% หรือ 95% ตามลำดับ

วิธีนี้คุณสามารถตรวจสอบองค์ประกอบ html ทั้งหมดของหน้าเว็บของคุณและให้ค่าที่แตกต่างกับคุณสมบัติที่ต้องเปลี่ยนเมื่อหน้าจอกว้างขึ้นหรือแคบลงในสไตล์ชีทของคุณ

ตัวอย่างเช่นเมนูที่ด้านบนของเว็บไซต์ของฉันจะหายไปเมื่อหน้าจอแคบเกินไปและแทนที่จะวางลิงก์ไว้ที่ด้านบนของหน้า เมื่อคุณคลิกเท่านั้นคุณจะเห็นเมนู

ไซต์มือถือรุ่นอื่นของคุณ

ด้วยการออกแบบที่ตอบสนองได้ลักษณะที่ปรากฏของเว็บไซต์ของคุณจะปรับตามความกว้างของหน้าจอ เนื้อหาของหน้าเว็บของคุณจะไม่เปลี่ยนแปลง แต่จะยังคงเหมือนเดิมทุกความกว้างหน้าจอ แต่บางครั้งก็เป็นการดีที่จะสร้างเว็บไซต์สำหรับมือถือแยกต่างหาก

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

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

ว่าทุกเสียงที่มีความซับซ้อนมาก แต่มันไม่ต้องมีการ มี บริษัท หลายแห่งที่คุณสามารถวางเว็บไซต์สำหรับมือถือของคุณได้และมีรหัสที่กำหนดว่าผู้เข้าชมควรถูกเปลี่ยนเส้นทางหรือไม่

หากคุณต้องการทำด้วยตัวเองคุณสามารถใส่หน้ามือถือของเว็บไซต์ของคุณไว้ในโฟลเดอร์บนเซิร์ฟเวอร์ของคุณเองและด้วยสคริปต์สคริปต์ของ Detect Mobile Browsers คุณต้องแน่ใจว่าผู้เยี่ยมชมของคุณถูกนำทางไปยังหน้าที่ถูกต้อง แต่เพื่อให้สามารถทำเช่นนั้นคุณต้องมีความรู้เกี่ยวกับ html และ php