Как изменить meta viewport в зависимости от ширины?

Question

[K G]

У меня responsive сайт и от 768px и выше он такие и является. Мне нужно чтобы ниже 768px он переставал адаптироваться и зафиксировался в таком положении.
Другими словами все что выше 768 стоит мета тег:

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

А если меньше 768, то он убирается.

Answer 1

[lem_prod]

можно по средствам js
обработчики на onload, onresize, которые будут проверять ширину экрана и добавлять соответствующий тэг.

но я бы советовал не трогать meta и писать media-query.

Comments

[K G]

Вот надо через js как-то попробовать. Такой уж клиент у меня, что для меньше 768 адаптировать не нужно. Через media-query можно было бы на это влиять с помощью @viewport, но поддержка только за флагами.

[lem_prod]

pwnography: эту функцию дописываете и вешаете на те обработчики, что выше написал

function() {
if (window.innerWidth < /* значение которое интересует */) {
var viewport = document.querySelector('meta[name="viewport"]');
//изменяете viewport как надо
}
}

но это костыль, сразу говорю, по уму надо с media делать.

[K G]

lem_prod: lem_prod: Я вот написал функцию. Изначально в хтмл метатега нет и при событиях load или resize, если ширина больше 768, то он добавляется. Но почему-то не работает( В DOM, если меньше 768 мета тега нет, но страница изменяется как будто он применен

function windowSize() {
	if ($(window).innerWidth() > '768') {
		var viewport = $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1">');
	}
	else {
		$('meta[name="viewport"]').remove();
	}
}

$(window).on('load resize', windowSize);

[lem_prod]

function windowSize() {
if ($(window).innerWidth() > '768') {
var viewport = $('head').append('');
}
else {
$('meta[name="viewport"]').remove();

// если загружена страница, у которой ширина меньше 768, meta там просто не будет, там же первое условие не отработало.
}
}

$(window).on('load resize', windowSize);

[K G]

lem_prod: так в том то и дело, так и должно быть. И действительно если меньше 768 этого метатега там нет, то есть страница не должна адаптироваться и отобразиться как есть в полную ширину. Но она адаптируется(
Если я убираю скрипт, и в хтмл нет метатега, то все ок. Если скрипт есть, в хтмл тега нет, но она адаптируется все равно. watafuk!?

[Денис Белевцов]

pwnography: ну так поставте body {min-width: 768px;}

Answer 2

[Алексей Скляров]

Для того, чтобы сайт "переставал адаптироваться" при ширине > 768 нужно писать правила в css файле, а не извращаться таким способом. Если речь идет о bootstrap, то проще, как по мне, убрать адаптивность вообще и прописать стили для ширины < 768