m-haritonov

высота 1
 — вес 1
 — вес 2
высота 2
 — вес 1
 — вес 2

высота 1    высота 2
 — вес 1     — вес 1
 — вес 2     — вес 2

'           вес 1     вес 2
высота 1      —         —
высота 2      —         —

высота   вес
   — 1   — 1
   — 1   — 2

Думаю для этого Вам стоит изучить модель работы браузера и протокола HTTP, понять какое место в этой модели занимает JavaScript (а также HTML и CSS) и, собственно, изучить стандарт языка и окружение, в котором JavaScript работает в браузере (DOM и т.п.).

Модель работы HTTP и браузера можно представлять в виде процессов, которые преобразуют одни данные в другие и каждый из которых протекает в рамках других, более глобальных процессов (существующих в конечном итоге в рамках физических процессов, происходящих в окружающем нас мире).

В общем грубую модель работы HTTP и браузера можно описать нижеследующим образом.

Один компьютер (сервер) посылает другому компьютеру (клиенту), в ответ на его запрос, набор данных (HTTP заголовки ответа и тело HTTP ответа: HTML, CSS, JavaScript код). Все эти данные могут быть сгенерированы динамически (например, с помощью PHP), но на работу браузера это не влияет (т.к. он получает лишь сгенерированный, статический набор данных).

Далее клиент (браузер), получив набор данных от сервера, начинает последовательно просматривать эти данные (для того, чтобы вывести их пользователю на экран в графическом виде).

Сначала он просматривает заголовки HTTP ответа, а затем приступает к просмотру и выводу тела HTTP ответа (в заголовках ответа содержится, в частности, указание на то, какие данные находятся в теле запроса и, соответственно, как их выводить).

В случае, если тип данных будет "text/plain" (т.е. обычный текст), то браузер выведет его на экран как обычный текст (без всякого форматирования и анализа: не будет искать в нём HTML теги, не будет искать участки JavaScript кода и затем исполнять их и т.п.).

В случае же, если тип данных будет "text/html" (т.е. HTML страница), то браузер не просто выведет на экран тело ответа и исходном виде, а будет искать в нём специальные символы, которые сами выводиться не будут, а будут изменять формат вывода связанного с ними текста.

Например.

Если браузер встречает в просматриваемом тексте HTML тег, то на экран будет выведен содержащийся в теге текст, выделенный в соответствии с договорённостью (между разработчиками браузера и разработчиками HTML страниц) о форме вывода данного тега.

Если браузер встречает участок с CSS кодом (тег , например), то он переключается в режим разбора CSS кода и сохраняет результат разбора у себя в памяти, чтобы затем выделять текст во встречающихся тегах уже в соответствии с правилами, содержащимися в этом участке CSS кода.

Если браузер встречает участок JavaScript кода, то он переключается в режим разбора JavaScript кода и действует уже в соответствии с новыми правилами (правилами разбора JavaScript, а не HTML кода). Например, если в JavaScript коде встречается инструкция, для вывода текста прямо сейчас ("document.write"), то на экран пользователя выведется результат выполнения этой инструкции. А, если встречается инструкция для объявления функции, то браузер прямо сейчас ничего на экран выводить не будет, а сохранит эту функцию для дальнейшего использования (например, эта функция может быть вызвана, когда произойдёт какое-либо событие).

Т.е. браузер является бесконечно работающим процессом, который выводит что-то на экран пользователя (т.к. именно отобразить страницу пользователю является его целью) как при первой загрузке страницы так и при возникновении каких-либо событий уже после загрузки страницы (клик мыши, исполнение JavaScript кода, который содержался в функции, которая вызывалась при первой загрузке и продолжала бесконечно вызывать сама себя через определённый промежуток времени и т.п.).

Если я всё правильно понял, то у Вас имеется контент, минимальной шириной в 320px и максимальной — в 900px. И Вам надо:
1. Если размер экрана устройства меньше 900px, то задать ширину viewport'а страницы как у экрана устройства (чтобы произошло перестроение CSS разметки под эту ширину).
2. Если размер экрана устройства больше или равен 900px, то задать ширину viewport'а страницы в 900px (чтобы на экранах размером в 900px и больше контент увеличивался за счёт масштаба).

Для этой задачи могу предложить следующее решение (скопируйте из данного примера на свой сайт JavaScript код, разместив его выше всех других подключений и вставок CSS и JavaScript кода). Проверял только на iPad 2.

<!DOCTYPE html>
<html>
	<head>
		<script type="text/javascript">
			(function(){
				// Выполняем код только на мобильных браузерах (на всякий случай)
				if (typeof(window.orientation) !== 'undefined')
				{
					// Функция взята отсюда: https://makandracards.com/makandra/13743-detect-effective-horizontal-pixel-width-on-a-mobile-device-with-javascript
					function getDeviceWidth()
					{
						var deviceWidth = window.orientation == 0 ? window.screen.width : window.screen.height;
						// iOS returns available pixels, Android returns pixels / pixel ratio
						// http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html
						if (navigator.userAgent.indexOf('Android') >= 0 && window.devicePixelRatio)
							deviceWidth = deviceWidth / window.devicePixelRatio;

						return deviceWidth;
					}

					var deviceWidth = getDeviceWidth();
					var maxWidth = 900;
					
					if (deviceWidth < maxWidth)
					{
						// Мои эксперименты на iPad 2 показали, что device-width всегда содержит значение ширины 
						// экрана в книжной (portrait) ориентации (т.е. даже, если устройство находится в 
						// альбомной (landscape) ориентации). Это же утверждалось в некоторых найденных мною статьях.
						if (window.orientation == 0 || window.orientation == 180)
							document.write('<meta name="viewport" content="width=device-width">');
						else
							document.write('<meta name="viewport" content="width=device-height">');
					}
					else
						document.write('<meta name="viewport" content="width=' + maxWidth + '">');
				}
			})();
		</script>
		
		<style type="text/css">
			* { margin: 0; padding: 0; }
			.content { min-width: 320px; max-width: 900px; background: #ffff99; }
			.content div { border: 1px solid #f00; }
		</style>
	</head>
	<body>
		<div class="content">
			<div>
				abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
				abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
				abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc abc
			</div>
		</div>
	</body>
</html>