HTML & JS: Web sitesi, mobil cihazlarda (iOS), küçük görünüme sahip varsayılan görünümde görünüm penceresi ile nasıl açılır? Uygulamamda Varsayılan olarak

Ben iki çözünürlükleri (genişlik):HTML & JS: Web sitesi, mobil cihazlarda (iOS), küçük görünüme sahip varsayılan görünümde görünüm penceresi ile nasıl açılır? Uygulamamda Varsayılan olarak

1024px+ & 520px

ve ben böyle görüntü bölmesi:

<meta name="viewport" content="width=520, initial-scale=0.5" id="vwPrt"> 
<script> 
    window.onload = function() { 
    if(screen.width > 521) { 
     var vpEl = document.getElementById('vwPrt'); 
     vpEl.setAttribute('content','width=520, initial-scale=1'); 
    } 
    if(screen.width > 970) { 
     var vpEl = document.getElementById('vwPrt'); 
     vpEl.setAttribute('content','width=1024, initial-scale=1'); 
    } 
    } 
</script>

ve css:

... 

@media all and (min-width:0px) and (max-width:520px){...} 
...

ve bazen iOS cihazlarda, büyük bir çözünürlük (1024px +) için css stillerini görüyorum ve sadece kıç ölçekleme veya sayfayı yeniden yükleme, iPad ve iPhone için 520px (portre modunda) alırım.

Neyi yanlış yapıyorum?

Masaüstü modda çalışırken, genişliğini anında nasıl algılayabilir ve doğrudan yanıp sönen ekrandan uygulayabilirim? MDN'yi itibaren

kaynak

2016-02-18 brabertaser19

: Ben ideal herhangi stilleri veya diğer komut önce, mümkün olduğunca HEAD bu kadar yüksek koymak istiyorum düzen görünümünü değiştirebilir mi? – denmch

@denmch Minimum genişlik 640px var - ve aygıt genişliği 540px ise - kayar - bu kötü bir fikir – brabertaser19

@ brabertaser1992 neden ekran boyutunu aldıktan sonra sayfayı yeniden yönlendirmiyorsunuz? – Vixed

: belge yükleme işleminin sonunda

yük olayı harekete. Bu noktada, numaralı belgede, belgedeki tüm nesneler DOM'de ve tüm görüntü, komut dosyaları, bağlantılar ve alt çerçeveler yüklemeyi tamamlamıştır. herşey yüklendikten önce

window.onload() olmadan bunu yapmak mümkün olmalıdır, senaryonuz ateşi yapmak için:

if (screen.width > 521) { 
    document.getElementById("viewport").setAttribute("content", "width=520; initial-scale=0.5"); 
} 
if (screen.width > 970) { 
    document.getElementById("viewport").setAttribute("content", "width=1024; initial-scale=0.5"); 
}

kaynak

2016-02-21 19:12:54 denmch

her an çalışacak mı? Yüklemeden önce viewport düğümünü bulacak mıyım? – brabertaser19

Ben çok daha kolay bir şekilde tavsiye ederim. Medya sorgusuna bağlı olarak ayrı bir CSS dosyasına bağlantı kurmak mümkündür. Ayrıca çok kolayca içerik ayırabilir ve her şey yüzünden size ayrılmış medya sorguları tutmak gerçeğine daha iyi okunabilir hale gelmesi durumunda

<link rel='stylesheet' media='all and (min-width: 0px) and (max-width: 520px)' href='css/small_devices.css' /> 
<link rel='stylesheet' media='all and (min-width: 520px) and (max-width: 970px)' href='css/medium_devices.css' /> 
<link rel='stylesheet' media='all and (min-width: 970px)' href='css/large_devices.css' />

: Yapmanız gereken şey

şudur.

Bu bağlantıyı belgenizin <head> içine koymanız gerekir. Bunu yapmak, içeriğin gösterilmeden önce yüklenmesini de sağlayacaktır.

kaynak

2016-02-25 14:22:49 Rotan075

Aşağı çekmiyorum ama bu sorunu çözmüyor. 1. yüz binlerce CSS çizgisiyle bir mega siteniz olmadığı sürece, tüm CSS'lerinizi tek bir dosyada bir araya getirmek her zaman daha iyidir. Örneğin. CSS'nin 26.000'den fazla satırı yaklaşık 350Kb çalışır - ancak sadece 45Kb gzipli - 3x 15Kb taleplerinden daha ucuzdur. 2, hangi stiller yüklerseniz yükleyin, viewport meta etiketi, tarayıcının sayfanızı oluşturduğu boyutu kontrol eder - OP'nin yardıma ihtiyacı vardır. Bu soru için sadece css çözümü yoktur. –

Mayby mobil ilk çözümleriyle CSS

@media all and (orientation:portrait) and (min-width:0px) and (max-width:520px){...}

kaynak

2016-02-26 14:45:53 pietro

Kullanım bootstrap yılında "yönlendirme" ile test edebilirsiniz. JavaScript başına çözünürlükleri takip etmenize veya bir sürü medya sorusu yazmanıza gerek yoktur.

kaynak

2016-02-26 22:18:33

-1

window.onload ürününü beklemek için herhangi bir neden göremiyorum, bu durum büyük olasılıkla istenmeyen içeriğe neden olabilir. Kodunuz, 970 pikselden daha büyük ekranlar için değeri iki kez de ayarlayacaktır - ki bu sadece gereksizdir. En performanslı ve anında sonuçlar için meta etiketi bu şekilde yazabilirsiniz.genişliğini belirten ve cihazın böylece `width = aygıt width` kullanmayan için iyi bir neden var mı

<script> 
    var width = 'device-width'; 
    if(screen.width > 521) { 
     width = '520'; 
    } 
    if(screen.width > 970) { 
     width = '1024'; 
    } 
    document.write('<meta name="viewport" content="width=' + width + ', initial-scale=0.5" id="vwPrt">'); 
</script>

kaynak

2016-02-28 01:39:44

HTML & JS: Web sitesi, mobil cihazlarda (iOS), küçük görünüme sahip varsayılan görünümde görünüm penceresi ile nasıl açılır? Uygulamamda Varsayılan olarak

cevap

İlgili konular