Анатолий

instant-eyedropper.com

Вопрос закрываю, подсказали, что можно <noscript> пользоваться.
Сделал вывод блока так

<noscript>
	<style>
		.block {
			width: 100%;
			height: 50px;
			text-align: center;
			line-height: 50px;
			color: #fff;
			font-size: 2rem;
			background-color: #f00;
			margin: 0 auto; }
	</style>
	<div class="block">Внимание! У Вас в браузере отключена поддержка javascript.</div>
</noscript>

Перезагрузил планшет и все заработало, возможно дело было в кеше.
Сейчас пишу:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

получаю: 689x982

<meta name="viewport" content="width=device-width, initial-scale=0.9">

получаю: 765x1091

<meta name="viewport" content="width=device-width, initial-scale=0.8">

получаю: 861x1346

<meta name="viewport" content="width=900, user-scalable=no">

получаю: 900x1407
причем даже на телефонах стало 900

короче вернул обратно на

<meta name="viewport" content="width=device-width, initial-scale=1.0">

всем доволен, тему закрываю

main {
    flex: 0 0 auto;
    overflow: hidden;
}

aside {
    flex: 1 1 600px;
    background-color: #5f9;
}

<div class="lazy" style="background-image: url(1_mini.jpg)" data-src="1.jpg"></div>
<div class="lazy" style="background-image: url(2_mini.jpg)" data-src="2.jpg"></div>
<div class="lazy" style="background-image: url(3_mini.jpg)" data-src="3.jpg"></div>
<div class="lazy" style="background-image: url(4_mini.jpg)" data-src="4.jpg"></div>
<div class="lazy" style="background-image: url(5_mini.jpg)" data-src="5.jpg"></div>

<script>
  var lazyImage = document.getElementsByClassName('lazy');
  img = new Array();
  for ( var i=0; i < lazyImage.length; i++ ) { img[i] = new Image(); }
  i = 0;

  ttt();

  function ttt() {
    img[i].onload = function() {
	lazyImage[i].style.backgroundImage = "url(" + lazyImage[i].getAttribute('data-src') + ")";
	i++;
	img[i].src = lazyImage[i].getAttribute('data-src');
	ttt();
    }
  }
  
 img[i].src = lazyImage[i].getAttribute('data-src');
</script>

Вопрос решил!

<script>
if (!("ontouchstart" in document.documentElement)) {
  document.documentElement.className += " no-touch";
}
</script>

и далее дописал, где используется hover и focus
.no-touch
проверил, работает!

IE9-11 desktop & mobile don't properly scale SVG files. Adding height, width, viewBox, and CSS rules seem to be the best workaround.

Помог пример: shpargalkablog.ru/2017/07/position-fixed-parent.html

Нашел решение, нужно указать еще height, хотя бы равный 1px.
Тогда минимальная высота будет работать как надо, и выравнивание тоже сработает.

Зачем за кем-то повторять, нужно делать как удобно самому! Есть ситуации, когда лучше использовать одно, а есть ситуации когда логичнее использовать другое.