วิธีการเปิดใช้งานความสามารถของสมาร์ทโฟนบนเว็บไซต์

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

ข้อ จำกัด ของการเรียกดูสมาร์ทโฟน

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

CSS ขนาดสัมพัทธ์

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

คุณสมบัติการแสดง CSS

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

การเปลี่ยนเส้นทางเบราว์เซอร์

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

HTML สำรอง

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