I ran into an issue that device-width would return the portrait width of the device, but I needed to target the landscape width. In order to accomplish this, initial-scale needs to be set, but setting it doesn't allow for a retina display on iPhone to accurately get the width of the device, so I created this workaround.

viewport workaround

<meta name="viewport" content="">
<script>
	var viewportmeta = document.querySelector("meta[name=viewport]");
	if (/iPhone/i.test(navigator.userAgent) && window.devicePixelRatio > 1) {
		if (viewportmeta) {
			viewportmeta.setAttribute('content', 'width=device-width');
		}
	} else {
		if (viewportmeta) {
			viewportmeta.setAttribute('content', 'width=device-width,initial-scale=1');
		}
	}
</script>