การปรับเปลี่ยนไซต์สำหรับอุปกรณ์เคลื่อนที่: การสอนทีละขั้นตอน รุ่นไซต์บนมือถือ

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

ข้อมูลทั่วไป

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

พิจารณาแท็ก

ดังนั้นจึงเป็นสิ่งที่จำเป็นในการดูแลที่meta name tag = "viewport" สำหรับอะไร? ประกอบด้วยคำแนะนำสำหรับเบราว์เซอร์เกี่ยวกับวิธีปรับขนาดและขนาดของหน้าเว็บโดยคำนึงถึงความกว้างของหน้าจอของอุปกรณ์ที่มีการดูไซต์ หากคุณไม่ได้เพิ่มองค์ประกอบขนาดเล็กนี้หน้าเริ่มต้นจะเป็นหน้าเว็บที่ออกแบบมาสำหรับเครื่องคอมพิวเตอร์ แต่เบราว์เซอร์มือถือจะพยายามเพิ่มประสิทธิภาพเนื้อหาซึ่งจะส่งผลให้เกิดการเพิ่มแบบอักษร scalability ของเนื้อหาหรือแสดงเนื้อหาบางอย่างที่ปีนขึ้นไปบนหน้าจอ มันเป็นที่น่าพอใจ? ไม่รุ่นโทรศัพท์มือถือในกรณีนี้จะทำให้เกิดการรับรู้เชิงลบเท่านั้น หลังจากที่ทุกแบบอักษรจะไม่สมส่วนคุณจะต้องเลื่อนหน้าเว็บและดำเนินการชุดการกระทำที่แม้ว่าจะเป็นเรื่องรองก็ตามก็ยังน่าเบื่อ ตรวจสอบการปรับตัวของไซต์สำหรับโทรศัพท์มือถือสามารถใช้สมาร์ทโฟนแท็บเล็ตหรือบริการพิเศษและโปรแกรมต่างๆได้ แน่นอนว่าตัวเลือกสองตัวแรกเป็นตัวเลือกที่ดีกว่า แต่ถ้าคุณต้องการการวิเคราะห์อย่างรอบคอบจากตำแหน่งอุปกรณ์ต่างๆและประหยัดเวลาจากนั้นหลังจะทำ

ข้อดีของการปรับไซต์สำหรับอุปกรณ์เคลื่อนที่คืออะไร

ใช้วิธีนี้ช่วยให้:

1. ผู้ใช้แชร์เนื้อหาในกรณีที่มีที่อยู่เดียว
2. อัลกอริทึมของเครื่องมือค้นหาได้รับพารามิเตอร์ของหน้าเว็บที่แน่นอนและไม่มีความสับสนกับเวอร์ชันต่างๆ
3. ลดโอกาสในการเกิดข้อผิดพลาด
4. ลดเวลาในการดาวน์โหลดเนื่องจากไม่มีการจัดทำดัชนีใหม่
5. บันทึกแหล่งข้อมูล

นอกจากนี้หน้าการปรับตัวจะง่ายต่อการสร้าง,แทนที่จะเป็นตัวแปรหลายอย่าง การปรับไซต์สำหรับโทรศัพท์มือถือ (ค่อนข้างเป็นไปได้ที่จะทำด้วยตัวคุณเอง) ไม่ใช่เรื่องที่ซับซ้อนเพียงเท่านี้ก็เพียงพอแล้วที่จะรู้จัก JavaScript และสามารถทำงานร่วมกับ cascading style sheets (CSS) และภาพได้ มีหลายวิธีในการบรรลุผลงาน ภายใต้กรอบของบทความจะมีการพิจารณาตัวแปรที่เป็นที่นิยมมากที่สุดสามรูปแบบ:

1. เน้น JavaScript
2. รวม
3. การใช้ JavaScript แบบไดนามิก

ลองพิจารณารายละเอียดเพิ่มเติม

การปรับใช้ JavaScript

ในกรณีนี้จะใช้เนื้อหาหนึ่งรายการ และการใช้ JavaScript การจัดรูปแบบจะเปลี่ยนไปตามกลไกของเพจ ทุกอย่างในกรณีดังกล่าวขึ้นอยู่กับแพลตฟอร์ม อัลกอริทึมนี้คล้ายคลึงกับคำค้นหาสื่อสำหรับสไตล์ชีต cascading พิจารณาตัวอย่างเล็ก ๆ ของการทำงานในทางปฏิบัติ ดังนั้นเราจึงมีหน้าเว็บที่มีโค้ด HTML ซึ่งจะมีการวางองค์ประกอบ <script> ไว้ เมื่อมีการร้องขอพวกเขาจะส่งข้อมูลเดียวกัน แต่เมื่อมาถึงกระบวนการนี้จะมีอิทธิพลอย่างมากจากลักษณะของอุปกรณ์ และด้วยเหตุนี้การจัดรูปแบบของหน้าเว็บจะเปลี่ยนไป ตัวอย่างเช่นเราสามารถอ้างอิงสถานการณ์ภาพซึ่งจะเหมาะสำหรับการดูบนสมาร์ทโฟนและแท็บเล็ตไม่ใช่บนคอมพิวเตอร์ ประโยชน์ที่สำคัญของตัวเลือกนี้ก็คือคอมพิวเตอร์จะรับรู้ถึงการใช้งานโดยอัตโนมัติ นอกจากนี้คุณไม่จำเป็นต้องได้รับส่วนหัวพิเศษเพราะไม่มีการแสดงเนื้อหาแบบไดนามิก

การรวมกัน

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

JavaScript แบบไดนามิกและตัวเลือกอื่น ๆ

ในกรณีนี้จะเห็นได้ว่าจะมีให้รหัสเดียวกันกับองค์ประกอบเฉพาะซึ่งระบุไฟล์ภายนอกที่เนื้อหามีความแตกต่างกันไปขึ้นอยู่กับตัวแทนที่ใช้ นั่นคือเราจะมีหน้าแบบไดนามิกอยู่ข้างหน้าเรา นี่เป็นอย่างไร? หลายคนใช้ตัวแปรเดียวกัน: User-agent สำหรับข้อมูลนี้ และเมื่อทำงานกับหน้าข้อมูลจะได้รับการอัปเดตตามเวลาจริงซึ่งเป็นสิ่งที่ดีมาก เกี่ยวกับทฤษฎีคุณยังสามารถพูดคุยได้เป็นอย่างดี วิธีที่จะไม่จดจำ divas (<div>) ซึ่งคุณสามารถ "ล้วง" การปรากฏตัวของไซต์และสิ่งอื่น ๆ แต่หลังจากทั้งหมดเรามีความสนใจในวิธีการทำมัน!

การเตรียมการสำหรับการใช้งาน

ควรสังเกตว่ามีสองวิธีในการสร้างไซต์ที่ปรับเปลี่ยนได้:

1. คู่มือ
2. อัตโนมัติ

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

รูปแบบที่ยืดหยุ่น

เพื่อให้เราได้ออกขนม "ตัวอักษร"ควรใช้หน่วยวัดสัมพัทธ์เท่านั้น ในทางปฏิบัติแบบอักษรทั้งหมดจะถูกปรับแต่งให้เป็น em และขนาดขององค์ประกอบถูกระบุเป็นเปอร์เซ็นต์ แม้ว่าคุณจะสามารถใช้และ px ได้เป็นระยะ (ถ้าต้องการ) แต่ก็ทำได้ดีกว่าหากไม่มีพวกเขา เมื่อระบุความกว้างหรือความสูงคุณควรใช้หมายเลขคงที่เช่น 1080, 1260 หรือ 768 และเปอร์เซ็นต์ เป็นตัวอย่าง - ความกว้าง: 90% คุณสามารถทำและ 80% และ 99% และ 100% ทุกอย่างขึ้นอยู่กับความต้องการของนาย แต่สิ่งที่เกี่ยวกับข้อความที่ปรากฏในองค์ประกอบบางอย่าง? ในกรณีนี้มีสูตรที่ดีมาก: ความกว้างของแบบอักษรแบ่งตามปัจจัยเดียวกันขององค์ประกอบพื้นหลังและเราได้รับการอ้างสิทธิ์ของเรา บางครั้งก็เกิดขึ้นที่ตัวเลขอาจยาวมาก ตัวอย่างเช่นมาตรฐานคือ 1260 และผู้ใช้ที่มีความกว้างของหน้าจอ 780 มาเมื่อแบ่งเราได้รับหมายเลขที่ยาวมาก มีความจำเป็นต้องกลมหรือไม่? ดีสถานการณ์ที่นี่มีความซับซ้อน หลายคนไม่แนะนำเด็ดขาด ควรดูสถานการณ์และประเมินความถูกต้องของความถูกต้อง ตัวอย่างเช่นคุณสามารถตั้งค่าให้พิจารณาเฉพาะตำแหน่งทศนิยมสอง, สาม, สี่หรือสิบ เชื่อฉันนี่เป็นงานง่ายๆการปรับแต่งไซต์สำหรับอุปกรณ์เคลื่อนที่ CSS ถ้ามีรายการที่ไม่มีข้อผิดพลาดสามารถทำซ้ำได้ทุกอย่าง

แบบอักษรภาพและข้อความสื่อที่ยืดหยุ่น

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

1. 16/16 = 1 em
2. 18/16 = 1,125 em

ผลควรเขียนไว้ขนาดตัวอักษรเพิ่มหลังจากเครื่องหมายจุดคู่ อย่างไรก็ตามหากค่าเหล่านี้รวมอยู่ในที่อื่น ๆ แล้วควรระลึกไว้เสมอว่าค่าที่เราป้อนไว้จะปรากฏขึ้น

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

ข้อสรุป

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