You can't use the media attribute on meta tags according to Mozilla (although you probably should be able to).
The best option, in my opinion, would probably be client-side Javascript, and assuming you are using jQuery, it should be easy to get a reliable reading of the window width.
You don't need to use media queries at all. jQuery provides a .width() shortcut to get the width of a window (you can do this without jQuery, but jQuery makes your reading more reliable than plain Javascript).
if ($(window).width() >= 768 && $(window).width()) <= 1024)
$('meta').attr('name', 'viewport').attr('content', 'minimum-scale=1.0, maximum-scale=1.0').appendTo('head')
else if ($(window).width() >= 320 && $(window).width() <= 568)
$('meta').attr('name', 'viewport').attr('content', 'maximum-scale=1.0').appendTo('head')
But, remember that once the window resizes, these rules won't update unless you have code to do that.
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…