HTML i JS: jak domyślnie otwierać witrynę z rzutnią na urządzeniach mobilnych (iOS) z małym okienka ekranu?

domyślnie w moim app mam dwa rozdzielczości (szerokość):HTML i JS: jak domyślnie otwierać witrynę z rzutnią na urządzeniach mobilnych (iOS) z małym okienka ekranu?

1024px+ & 520px

i mam takie rzutnia:

<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>

i CSS:

... 

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

i czasami na urządzeniach z iOS, najpierw widzę style CSS dla dużej rozdzielczości (1024px +) i tylko na rufie er skalowanie, lub ponowne ładowanie strony, dostaję 520px dla iPada i iPhone'a (w trybie portretowym).

Co robię źle?

Jak mogę wykryć szerokość w locie i zastosować ją bezpośrednio bez migającego ekranu w trybie pulpitu?

Źródło

2016-02-18 brabertaser19

Czy istnieje dobry powód do określania szerokości, a nie przy użyciu 'width = device-width' tak, że urządzenie można dostosować rzutnię układu? – denmch

@denmch Mam szerokość min 640px - a jeśli szerokość urządzenia to 540px - będzie przewijana - to zły pomysł – brabertaser19

@ brabertaser1992 dlaczego po prostu nie przekierujesz strony po uzyskaniu rozmiaru ekranu? – Vixed

Od MDN:

Zdarzenie

obciążenia na końcu procesu ładowania dokumentu. W tym punkcie wszystkie obiekty w dokumencie znajdują się w DOM, a wszystkie obrazy, skrypty, łącza i podramki zakończyły się ładowaniem.

Aby dokonać pożar skryptu zanim wszystko załadowany, powinieneś być w stanie to zrobić, bez window.onload():

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"); 
}

Źródło

2016-02-21 19:12:54 denmch

będzie działać za każdym razem? mam na myśli czy znajdzie węzeł widoczności przed załadowaniem? – brabertaser19

Polecam znacznie łatwiejszy sposób. Możliwe jest połączenie z oddzielnym plikiem CSS w zależności od zapytania o media.

Co trzeba zrobić, jest następujący:

<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' />

W takim przypadku można również podzielić zawartość bardzo łatwo i wszystko staje się lepsze czytelna ze względu na fakt, że można zachować zapytań o media oddzielone.

Musisz umieścić ten link wewnątrz <head> swojego dokumentu. Takie działanie zapewni także, że zostanie załadowany przed wyświetleniem zawartości.

Źródło

2016-02-25 14:22:49 Rotan075

Nie spadam, ale to nie rozwiązuje problemu. Po pierwsze, chyba że masz mega stronę z setkami tysięcy linii CSS, zawsze lepiej jest wysłać wszystkie swoje CSS razem w jednym pliku. na przykład. 26 000+ wierszy CSS ma około 350 KB, ale tylko gkipowane 45 KB - co jest mniej kosztowne niż 3 x 15 KB. Po drugie, niezależnie od tego, jakie style ładujesz, metatag okna roboczego kontrolki kontroluje rozmiar, w którym przeglądarka będzie renderować twoją stronę - z czym OP potrzebuje pomocy. Na to pytanie nie ma rozwiązania typu css-only. –

Mayby można przetestować z "orientacji" w CSS

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

Źródło

2016-02-26 14:45:53 pietro

bootstrap Korzystanie z pierwszych rozwiązań mobilnych. Nie trzeba śledzić rozdzielczości na skrypt JavaScript ani pisać całego szeregu mediów.

Źródło

2016-02-26 22:18:33

-1

Nie widzę żadnego powodu, aby czekać na window.onload, ponieważ bardzo prawdopodobne, że spowoduje flash niepożądanych treści. Twój kod ustawi także wartość dwukrotnie dla ekranów większych niż 970px - co jest po prostu niepotrzebne. Możesz po prostu napisać metatag w taki sposób, aby uzyskać najbardziej wydajne i natychmiastowe wyniki.Chciałbym umieścić to jak wysoko w głowę jak to możliwe, najlepiej przed każdym modelu lub innych skryptów:

<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>

Źródło

2016-02-28 01:39:44

HTML i JS: jak domyślnie otwierać witrynę z rzutnią na urządzeniach mobilnych (iOS) z małym okienka ekranu?

Odpowiedz

Powiązane problemy