วิธีสร้าง <div> ให้เติมหน้าต่างเบราว์เซอร์อย่างแน่นอนรวมถึง Mobile Safari ตั้งแต่ 2019

10

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

แผนที่จะถูกนำมาใช้เช่นเดียว<div>กับกับposition: fixedและทั้งสี่พิกัดศูนย์; ฉันยังตั้งชั่วคราว<body>ไปoverflow: hiddenในขณะที่แผนที่จะมองเห็นได้ในการจัดการกับกรณีของจอแสดงผลแอปพื้นฐานที่ถูกเลื่อนออกไปจากแหล่งกำเนิด เพียงพอแล้วที่จะทำให้แผนที่ทำงานตามที่ฉันต้องการบนเบราว์เซอร์เดสก์ท็อป เบราว์เซอร์มือถือยังต้องการให้ฉันให้เมตาวิวพอร์ตแท็กกับบางสิ่งบางอย่าง"width=device-width,user-scalable=no"เพื่อให้พื้นที่ที่มองเห็นของหน้าต่างตรงกับวิวพอร์ต

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

ฉันจะเพิ่มการใช้history.pushState/ onpopstateเพื่อให้การซ้อนทับแผนที่ทำงานเหมือนหน้าอื่น ๆ คุณสามารถออกจากโหมดแผนที่โดยใช้ปุ่มย้อนกลับของเบราว์เซอร์ - แต่นั่นไม่ได้หมายความว่าฟังก์ชั่นที่เหลือจะหายไปจากปุ่มที่หายไป

ฉันได้พิจารณาที่.requestFullscreen()จะใช้การวางซ้อนแผนที่ แต่ไม่รองรับทุกที่ที่แอปจะใช้งานได้ โดยเฉพาะอย่างยิ่งดูเหมือนว่าจะไม่สามารถใช้งานได้บน iPhone และบน iPads คุณจะได้รับแถบสถานะและปุ่ม 'X' ขนาดใหญ่ซ้อนทับเนื้อหาของคุณ - มาตรวัดระยะทางของฉันอาจไม่สามารถอ่านได้อีกต่อไป มันไม่ใช่ความหมายที่ฉันต้องการจริงๆใช่ไหม - ฉันต้องการหน้าต่างเต็มไม่ใช่แบบเต็มหน้าจอ

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

— jasonharper
แหล่งที่มา

1

@Joehat กลุ่มของ app คือการตอบสนอง; นั่นไม่ใช่ปัญหา นี่เป็นเพียงคุณลักษณะการซ้อนทับแผนที่ที่มีปัญหา: ท่าทางสัมผัสใช้เพื่อซูม / เลื่อนแผนที่ (เป็น SVG สร้างโดย d3.js) ทำให้ไม่มีทางปรับการซูมและการเลื่อนของเบราว์เซอร์ มันใช้งานได้ดีเมื่อเบราว์เซอร์อนุญาตให้ฉันควบคุมวิวพอร์ต

— jasonharper

1

คำถามพื้นฐานบางข้อ: คุณใช้การรีเซ็ต CSS หรือไม่ มีระยะขอบหรือช่องว่างแปลก ๆ หรือไม่? ร่างกายตั้งค่าเป็น 100vw x 100vh หรือไม่ ร่างกายอยู่ในตำแหน่งที่สัมพันธ์กับ div แผนที่ของคุณหรือไม่

— itsallgoodie

1

คุณสามารถแบ่งปันรหัสตัวอย่างสำหรับสิ่งนี้ได้ไหม .. ฉันจะตรวจสอบและแจ้งให้คุณทราบ

— Ranjith v

1

แสดงรหัสของคุณ !!

— nikhil sugandh

1

ภาพหน้าจอหรือตัวอย่างของเนื้อหาที่นำเข้ามาในหน้าต่างนี้จะช่วยกำหนดสิ่งที่เกิดขึ้นจริง ๆ

— Bryce Howitson

1

สารละลาย

ตั้งค่าความสูงของ div แบบเต็มหน้าจอให้เป็นwindow.innerHeightJavaScript จากนั้นอัปเดตบนหน้าต่างปรับขนาด

ปัญหาเดียวกันที่นี่:

https://stackoverflow.com/a/37113430/8662476

ข้อมูลเพิ่มเติม:

— Maurici Abad
แหล่งที่มา

1

คุณต้องตั้งค่าความสูงของทั้งเนื้อหาและ html เป็น 100%

   html, body {
       width: 100%;
       height: 100%;
       margin: 0;
    }

— iicaptain
แหล่งที่มา

1

คุณเคยลองสิ่งเหล่านี้หรือไม่

width: 100vw;
height: 100vh;
margin: 0;
padding: 0;

— Rajilesh Panoli
แหล่งที่มา

(ฉันคิดว่าคุณหมายถึง vwความกว้างไม่ใช่vh... ) คุณแนะนำองค์ประกอบใดให้ฉันเพิ่มสิ่งนี้ลงไป ฉันพยายามมันในหลายสถานที่ ( <html>, <body>และแผนที่<div>) แต่ไม่เห็นความแตกต่าง

— jasonharper

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

— Rajilesh Panoli

ไม่มีการแปลงในระดับ HTML, การซูม / การแพนแผนที่ทำได้โดยการใช้การแปลกับองค์ประกอบ SVG ที่เขียนขึ้น

— jasonharper

0

ลองนี้:

<meta name="viewport" content="width=device-width, height=device-height , 
initial-scale=1.0,user-scalable=no, shrink-to-fit=yes" />

— นิกกิล sugandh
แหล่งที่มา

สิ่งนี้ไม่เปลี่ยนแปลงอะไรเลยและฉันไม่เห็นเหตุผลที่จะคาดหวังว่า: shrink-to-fit=yesเป็นค่าเริ่มต้นและ Safari ไม่ให้ความสนใจกับตัวเลือกการปรับขนาดอีกต่อไป

— jasonharper

0

เนื่องจากฉันไม่สามารถแสดงความคิดเห็นได้ฉันต้องการเพิ่มว่าคุณควรตรวจสอบว่าแท็กร่างกายของคุณมีความสูงของเบราว์เซอร์หรือไม่ คุณอาจต้องการตรวจสอบสิ่งนี้: Chrome / Safari ไม่เติมความสูงของเฟล็กเพอร์เรนต์ 100%

— trigangle
แหล่งที่มา

0

นี่เป็นวิธีแก้ปัญหาแบบเก่าและแก้ไขปัญหาที่มีการเชื่อมโยงอย่างใกล้ชิด แต่ไม่เหมือนกันทั้งหมดดังนั้นฉันจึงไม่แน่ใจว่าจะใช้หรือไม่: https://github.com/gajus/brim

มันควรจะเป็นวิธีการแก้ปัญหาที่คล้ายกับ UI น้อยที่สุด

นี่คือคำถามอื่นที่อ้างอิงคำตอบนี้: iOS 8 ลบคุณสมบัติพอร์ตวิวของ "minimal-ui" ออกมีโซลูชั่น "full full screen" อื่น ๆ หรือไม่?

แจ้งให้เราทราบหากนี่ช่วยได้บ้าง

— แซมซาบิน
แหล่งที่มา

0

ลองใช้รหัสต่อไปนี้เพื่อ div

.class{height:100vh;}

— Ata Ur Rehman
แหล่งที่มา

0

ถ้าคุณใช้position: fixedเพียงใช้วิธี CSS มาตรฐานที่มีมานานหลายปี

.divFixedClass{
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

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

html.noScroll, html.noScroll > body{
    overflow:none;
}

ดังนั้นหากคุณเพิ่งเพิ่มคลาส noScroll ลงในแท็ก html จะเป็นการปิดการเลื่อน จากนั้นเมื่อคุณต้องการอนุญาตให้เลื่อนอีกครั้งคุณสามารถ

— Barkermn01
แหล่งที่มา

0

คุณสามารถใช้สิ่งนี้โดยใช้โครงสร้างสองชั้นสำหรับการควบคุมแผนที่และเลเยอร์แผนที่ของคุณ หมายความว่าคุณไม่จำเป็นต้องjavascriptดำเนินการตามที่คุณต้องการ (แม้ว่าจะไม่มีตัวอย่างการเข้ารหัสในคำถาม) คุณสามารถจัดการวิวพอร์ตด้วยCSSและนั่นคือความหมายที่แท้จริงของvwและvhเพื่อตอบความคิดเห็นของคุณ100vw / 100vh ควรจะช่วยอย่างไร?มันสามารถช่วยได้เนื่องจากvย่อมาจากวิวพอร์ต

ดูตัวอย่างข้อมูล

ตัวอย่างที่ดีกว่า (ให้ความแม่นยำยิ่งขึ้นกับพารามิเตอร์เฉพาะที่อาจพลาด) หากมีการเข้ารหัสบางอย่างในคำถาม

PS:เลเยอร์แผนที่ถูกจำลองโดยภาพที่ได้รับการซูมเมื่อเลื่อน

function zoom(event) {
  event.preventDefault();

  scale += event.deltaY * -0.01;

  // Restrict scale
  scale = Math.min(Math.max(.125, scale), 4);
  if (scale < 1) {
    scale = 1;
  }
  // Apply scale transform
  el.style.transform = `scale(${scale})`;
}
let scale = 1;
const el = document.getElementById('map');
el.onwheel = zoom;

.container {
  position: absolute;
   display: flex;
  align-items: center;
  justify-content: center;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
  background-color: transparent;
}

#map {
  width: 100vw;
  height: 100vh;
    background-repeat: no-repeat;
  background-position: center center;
  background-image: url(https://picsum.photos/800/500.webp);
  z-index: 1;
}


#main {
  display: grid;
  position: absolute;
  background-color: transparent;
  top: 0;
  left: 0;
  grid-template-columns: 6rem auto 6rem;
  grid-template-rows: 3rem auto 3rem;
  width: 0;
  height: 0;
 z-index: 2;
}

.t-l {
background: #fc0;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.t-r {
background: #0cf;
  position: fixed;
  z-index: 2;
  color: #000;
  top; 0;
  left: calc(100vw-6rem);
  right: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 1;
  grid-row-end: row1-end;
}
.b-l {
background: #c0f;
  position: fixed;
  z-index: 2;
  color: #000;
  bottom: 0;
  top: calc(100vh-3rem);
  left: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 1;
  grid-column-end: column1-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}
.b-r {
background: #cf0;
  position: fixed;
  z-index: 2;
  color: #000;
  top: calc(100vh-3rem);
  left: 100vw;
  margin-left: -6rem;
  bottom: 0;
  width: 6rem;
  height: 3rem;
  display: block;
  grid-column-start: 3;
  grid-column-end: column3-end;
  grid-row-start: 3;
  grid-row-end: row3-end;
}

<div class="container">

  <div id="main">
    <button class="t-l">top left control</button>
    <button class="t-r">top right control</button>
    <button class="b-l">bottom left control</button>
    <button class="b-r">bottom right control</button>
  </div>
<div id="map"></div>
</div>

ขยายตัวอย่างข้อมูล

— Peter Darmis
แหล่งที่มา