2019'dan itibaren Mobil Safari de dahil olmak üzere <div> tarayıcı penceresini tam olarak doldurma

10

Çoğunlukla mobil cihazlarda kullanılacak tek sayfalık bir web uygulaması üzerinde çalışıyorum. Özelliklerinden biri, tüm tarayıcı penceresini geçici olarak ele alan bir harita modudur; haritanın dört köşesine bir mesafe ölçeği ve bazı kontroller eklenmiştir. İşte haritanın küçük bir ekran görüntüsü, böylece neden bahsettiğimi anlayabilirsiniz:

Harita, a <div>ile uygulanır position: fixedve dört koordinat da sıfırdır; Ayrıca geçici olarak ayarlanmış <body>için overflow: hiddenharita kökenli uzak kaydırılmak istenen temel uygulama ekranın durumda idare görünür iken. Haritanın masaüstü tarayıcılarda tam olarak istediğim şekilde çalışması için yeterli. Mobil tarayıcılar ayrıca "width=device-width,user-scalable=no", pencerenin görünür alanının görünüm penceresine tam olarak karşılık gelmesi için benzer bir meta meta etiketi vermem gerekiyordu .

Bu uygulamayı ilk kez yazdığımda tüm bunlar birkaç yıl önce güzel çalıştı , ancak iOS Safari'nin bir yerinde ölçeklendirme içeren meta görüntüleme alanı seçeneklerinden herhangi birini onurlandırmayı bıraktı - görünüşe göre çok fazla site etiketi yanlış uyguluyor, bu da okunamayan küçük metinlerle sonuçlanıyor, henüz aşılamaz. Şu anda, haritayı bu tarayıcıda etkinleştirirseniz, sağ ve alt kısımdaki bu düğmeleri kesen hafifçe yakınlaştırılmış bir görünüm elde edersiniz - ve bu konuda hiçbir şey yapamazsınızçünkü tüm dokunuşlar, tarayıcıda kaydırma yapmak yerine harita için yakınlaştırma / kaydırma hareketleri olarak yorumlanır. Harita, bu düğmelerden erişilen özellikler olmadan - ve sağ üstteki düğme olmadan, haritayı bile kapatamazsınız. Tek çıkış yolu kaydedilmemiş verilerin kaybına yol açabilecek sayfayı yeniden yüklemektir.

Harita yer paylaşımının ayrı bir sayfa gibi davranması için history.pushState/ kullanımını kesinlikle ekleyeceğim onpopstate. Tarayıcının Geri düğmesini kullanarak harita modundan çıkabilirsiniz - ancak bu, eksik düğmeler nedeniyle işlevsellik kaybının geri kalanını ele almaz.

.requestFullscreen()Harita yer paylaşımını uygulamak için kullanmayı düşündüm , ancak uygulamanın başka türlü kullanılabileceği her yerde desteklenmiyor. Özellikle, görünüşe göre iPhone'larda hiç çalışmıyor ve iPad'lerde bir durum çubuğu ve içeriğinizin üzerine yerleşen büyük bir 'X' düğmesi alıyorsunuz - mesafe ölçeğim artık okunamayacak. Zaten, ben gerçekten ne istediğini semantik değil - ben tam ihtiyacım pencere , tam ekran.

Modern tarayıcılarda çalışan tam pencereli bir ekranı nasıl edinebilirim? Konuyla ilgili bulabildiğim tüm bilgiler, meta görünüm etiketini kullanmaktan bahsediyor, ancak bahsettiğim gibi artık çalışmıyor.

— jasonharper
kaynak

1

@Joehat uygulamanın toplu olan yanıt veren araçlar; sorun bu değil. Sadece bir sorun olan bu harita yer paylaşımı özelliğidir: dokunma hareketleri, haritayı yakınlaştırmak / kaydırmak için kullanılır (d3.js tarafından oluşturulan bir SVG'dir), tarayıcının yakınlaştırmasını ve kaydırmasını ayarlamak için hiçbir yol bırakmaz. Tarayıcı görünüm penceresini kontrol etmeme izin verdiğinde iyi çalıştı.

— jasonharper

1

Bazı temel sorular: CSS sıfırlaması mı kullanıyorsunuz? Herhangi bir şeyde garip marjlar veya kürekler var mı? Gövde 100vw x 100vh olarak mı ayarlanmış? Gövde, harita bölmenizin çalışabileceği göreli olarak konumlandırılmış mı?

— itsallgoodie

1

bunun için örnek kod paylaşabilirsiniz lütfen .. kontrol edip size bildiririm

— Ranjith v

1

kodunu göster !!

— nikhil sugandh

1

Bir ekran görüntüsü veya bu pencereye yerleştirilen içeriğin bir örneği, neler olup bittiğini belirlemeye yardımcı olur.

— Bryce Howitson

1

Çözüm

Tam ekran div'in yüksekliğini window.innerHeightJavaScript ile ayarlayın ve ardından pencere boyutlarında güncelleyin.

Burada da aynı problem:

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

Daha fazla bilgi:

— Maurici Abad
kaynak

1

Hem vücudun hem de html'nin yüksekliğini% 100'e ayarlamanız gerekir.

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

— iicaptain
kaynak

1

Bunları denedin mi?

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

— Rajilesh Panoli
kaynak

( vwGenişlikten vhbahsettiğinizi varsayıyorum , değil ...) Bunu hangi öğeye eklememi öneriyorsunuz? Ben çeşitli yerlerde (bunu denedik <html>, <body>ve harita <div>), ancak hiçbir farkları gördük.

— jasonharper

Div için. Herhangi bir öğeye uygulanan dönüştürme ölçeği veya yakınlaştırma özelliği var mı?

— Rajilesh Panoli

HTML düzeyinde dönüşüm yok, harita yakınlaştırma / kaydırma işlemim onu oluşturan SVG öğelerine çeviriler uygulayarak yapılır.

— jasonharper

0

bunu dene:

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

— nikhil sugandh
kaynak

Bu hiçbir şey değişmedi ve ben bunu beklemek için bir neden görmüyorum: shrink-to-fit=yesvarsayılan ve Safari artık ölçekleme seçeneklerine herhangi bir önem vermiyor.

— jasonharper

0

Yorum yapamadığım için, vücut etiketinizin tarayıcının yüksekliği olup olmadığını kontrol etmeniz gerektiğini eklemek istiyorum. Bunu da kontrol etmek isteyebilirsiniz: Chrome / Safari,% 100 esnek ebeveyn yüksekliğini doldurmuyor

— trigangle
kaynak

0

Bu eski bir çözümdür ve yakından bağlantılı, ancak tam olarak aynı olmayan bir sorunu ele alır, bu yüzden geçerli olup olmadığından emin değilim: https://github.com/gajus/brim

Minimal-ui'ye benzeyen bir çözüm olması gerekiyordu.

İşte bu cevaba referans veren başka bir soru: iOS 8 "minimal-ui" viewport özelliğini kaldırdı, başka "yumuşak tam ekran" çözümleri var mı?

Bunun işe yarayıp yaramadığını bana bildirin.

— Sam Sabin
kaynak

0

Div için kodu takip etmeyi deneyin

.class{height:100vh;}

— Ata Ur Rehman
kaynak

0

kullanıyorsanız position: fixed, yıllardır kullanılan standart CSS yöntemini kullanın.

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

Bu, div otomatik boyutunu görünüm penceresinin tam boyutuna getirecektir ve sabitlenmiş bulundurma özelliğini kullanarak, ne kadar kaydırma yaparlarsa yapsınlar, kilitlenirler.

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

html etiketine noScroll sınıfını eklerseniz kaydırmayı devre dışı bırakır. sonra tekrar kaydırmaya izin vermek istediğinizde yapabilirsiniz.

— Barkermn01
kaynak

0

Bunu harita kontrolleriniz ve harita katmanınız için iki katman yapısı kullanarak uygulayabilirsiniz. Yani javascriptistediğinizi uygulamak için herhangi bir şeye ihtiyacınız yoktur (soruda kodlama örneği verilmemiş olsa da). Görüş alanını manipüle edebilirsiniz CSSve yorumunuzun asıl anlamı budur vwve vhyorumunuzu cevaplamak için 100vw / 100vh nasıl yardımcı olur? , vgörüntü alanı anlamına geldiği için yardımcı olabilir .

Örneğin snippet'e bakın.

Soruda bazı kodlamalar mevcutsa, daha iyi bir örnek (atlanabilecek belirli parametrelerde daha doğru olma) sağlanabilir.

PS: harita katmanı, kaydırılarak yakınlaştırılan bir görüntü ile simüle edilir.

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>

Snippet'i genişlet

— Peter Darmis
kaynak