HTML & JS: как открыть веб-сайт с окном просмотра на мобильных устройствах (iOS) с небольшим видовым экраном по умолчанию?

По умолчанию в моем приложении у меня два разрешения (ширина):

1024px+ и 520px

и у меня есть такой вид:

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

и css:

...

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

а иногда и на устройствах iOS, я сначала вижу стили css для большого разрешения (1024px +), и только после масштабирования или перегрузки страницы я получаю 520px для iPad и iPhone (в портретном режиме).

Что я делаю неправильно?

Как я могу определить ширину "на лету" и применить ее непосредственно без мигающего экрана в рабочем режиме?

Ответ 1

Я бы порекомендовал гораздо более простой способ. В зависимости от медиа-запроса можно связать отдельный файл CSS.

Что вам нужно сделать, это следующее:

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

В этом случае вы также можете легко разбить контент, и все становится более читаемым из-за того, что вы сохраняете медиа-запросы отдельно.

Вы должны поместить эту ссылку внутри <head> вашего документа. Это также обеспечит, чтобы это было загружено до того, как будет показано содержимое.

Ответ 2

Используйте bootstrap с мобильными первыми решениями. Не нужно отслеживать разрешения на JavaScript или писать целую кучу медиа-запросов.

Ответ 3

Из MDN:

Событие загрузки запускается в конце процесса загрузки документа. В этот пункт, все объекты в документе находятся в DOM, и все изображения, скрипты, ссылки и подкадры завершили загрузку.

Чтобы сделать ваш script огонь до того, как все загрузится, вы сможете сделать это без 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");  
}

Ответ 4

Mayby вы можете протестировать "ориентацию" в своем CSS

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

Ответ 5

Я не вижу причин ждать window.onload, так как это, скорее всего, вызовет вспышку нежелательного контента. Ваш код также установит значение дважды для экранов размером более 970 пикселей, что просто не нужно. Вы можете просто написать метатег, как это для самых результативных и немедленных результатов. Я бы поставил это как можно выше в вашей HEAD, в идеале, перед любыми стилями или другими скриптами:

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