9
วิธีสร้าง <div> ให้เติมหน้าต่างเบราว์เซอร์อย่างแน่นอนรวมถึง Mobile Safari ตั้งแต่ 2019
ฉันกำลังทำงานกับเว็บแอปเดียวซึ่งโดยทั่วไปจะใช้กับอุปกรณ์มือถือ หนึ่งในคุณสมบัติของมันคือโหมดแผนที่ซึ่งใช้งานชั่วคราวผ่านหน้าต่างเบราว์เซอร์ทั้งหมด มาตรวัดระยะทางและการควบคุมบางอย่างเชื่อมต่อกับมุมทั้งสี่ของแผนที่ นี่คือภาพหน้าจอเล็ก ๆ ของแผนที่เพื่อให้คุณสามารถบอกสิ่งที่ฉันกำลังพูดถึง: แผนที่จะถูกนำมาใช้เช่นเดียว<div>กับกับposition: fixedและทั้งสี่พิกัดศูนย์; ฉันยังตั้งชั่วคราว<body>ไปoverflow: hiddenในขณะที่แผนที่จะมองเห็นได้ในการจัดการกับกรณีของจอแสดงผลแอปพื้นฐานที่ถูกเลื่อนออกไปจากแหล่งกำเนิด เพียงพอแล้วที่จะทำให้แผนที่ทำงานตามที่ฉันต้องการบนเบราว์เซอร์เดสก์ท็อป เบราว์เซอร์มือถือยังต้องการให้ฉันให้เมตาวิวพอร์ตแท็กกับบางสิ่งบางอย่าง"width=device-width,user-scalable=no"เพื่อให้พื้นที่ที่มองเห็นของหน้าต่างตรงกับวิวพอร์ต ทั้งหมดนี้ใช้งานได้อย่างสวยงามไม่กี่ปีก่อนตอนที่ฉันเขียนแอพนี้ แต่ที่ใดที่หนึ่งตามแนว iOS Safari หยุดไม่ให้เกียรติตัวเลือก meta viewport ใด ๆ ที่เกี่ยวข้องกับการปรับขนาด - ดูเหมือนว่าเว็บไซต์จำนวนมากเกินไปใช้แท็กผิด ยังไม่สามารถซูมได้ ปัจจุบันหากคุณเปิดใช้งานแผนที่บนเบราว์เซอร์นี้คุณมีโอกาสที่จะได้รับมุมมองซูมที่เล็กน้อยซึ่งจะตัดปุ่มเหล่านั้นที่ด้านขวาและด้านล่างและคุณไม่สามารถทำอะไรกับมันได้เนื่องจากสัมผัสทั้งหมดถูกตีความว่าเป็นการซูม / แพนด้วยท่าทางของแผนที่ไม่ใช่การเลื่อนเบราว์เซอร์ แผนที่ไม่ได้มีประโยชน์มากนักหากไม่มีคุณสมบัติที่เข้าถึงผ่านปุ่มเหล่านั้น - และหากไม่มีปุ่มบนขวาคุณจะไม่สามารถปิดแผนที่ได้ ทางออกเดียวคือโหลดหน้าซ้ำซึ่งอาจทำให้ข้อมูลที่ไม่ได้บันทึกสูญหาย ฉันจะเพิ่มการใช้history.pushState/ onpopstateเพื่อให้การซ้อนทับแผนที่ทำงานเหมือนหน้าอื่น ๆ คุณสามารถออกจากโหมดแผนที่โดยใช้ปุ่มย้อนกลับของเบราว์เซอร์ - แต่นั่นไม่ได้หมายความว่าฟังก์ชั่นที่เหลือจะหายไปจากปุ่มที่หายไป ฉันได้พิจารณาที่.requestFullscreen()จะใช้การวางซ้อนแผนที่ แต่ไม่รองรับทุกที่ที่แอปจะใช้งานได้ โดยเฉพาะอย่างยิ่งดูเหมือนว่าจะไม่สามารถใช้งานได้บน iPhone และบน iPads คุณจะได้รับแถบสถานะและปุ่ม 'X' ขนาดใหญ่ซ้อนทับเนื้อหาของคุณ - มาตรวัดระยะทางของฉันอาจไม่สามารถอ่านได้อีกต่อไป มันไม่ใช่ความหมายที่ฉันต้องการจริงๆใช่ไหม …