Как правильно совместить две верстки (не адаптивную и под 320px)?

Question

[Игорь]

есть верстка 1200px и у нее <meta name="viewport" content="width=1280"> что бы на планшетах он не разлазился а уменшался в пропорциях (не адаптив) все размеры в px...

теперь вопрос мне нужно сделать верстку под телефоны 320 но проблема в том что из-за <meta name="viewport" content="width=1280"> не срабатывает @media... я много чего перепробывал и даже написал код jquery который менял viewport... но все равно страница не перестраивается... (я так понял что из-за того viewport сробатывает при загрузке странице а потом страница на него не реагирует)

как быть? как совместить две верстки? может можно как-то скриптом до загрузки страницы задавать viewport? или как-то скриптами подгружать разные страницы? три дня ламаю себе голову (

Answer 1

[Гарольд]

<link rel="stylesheet" media="screen and (min-width: 321px)" href="/css/all.css" />
<link rel="stylesheet" media="screen and (max-width: 320px)" href="/css/mobile.css" />

Comments

[Заур Ашурбеков]

Он будет грузить только один из этих файлов?
Если да, то что произойдет, если изменить размер экрана? Бывшая сыы будет заблокирована, другая будет подключена?
Заранее благодарю.

[Гарольд]

Заур Ашурбеков: Будет подключать другую css при изменении размера экрана. Но этим обычный пользователь не балуется

[Заур Ашурбеков]

Турбини Карпус: ну мне просто интересно было. Спасибо!

Answer 2

[Михаил Горячкин]

Ну что касается viewport-та то вы можете сделать что-то вроде этого:

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

(function (w, d) {
	var viewport = d.querySelector('#viewport'), 
      	viewports = {
    		default:  viewport.getAttribute('content'),
    		small: 'width=320'
  		};

	var viewport_set = function() {
        screen.width <= 320 ?  viewport.setAttribute( 'content', viewports.small) :  viewport.setAttribute( 'content', viewports.default );
	}
	//При загрузке
	viewport_set();
	// При изменении
	w.onresize = function() { 
  		viewport_set(); 
	}
}(window, document));

Ну а дальше уже в css media запросами, либо при подключении:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="mobile-device.css" />