I have the viewport width set to 520 (my site is 500 width, so I need this). My issue is that on an iPhone5 for example, the website fills the screen. But an iPhone6 or a tablet, there is a large amount of whitespace on either side.
I want to control the zoom based on which device/which screen widths are viewing the site.
I've tried media queries, but this just changes the dimensions of the site, I want to control the zoom, not change the dimensions of the website itself.
I found some code that switches the zoom based on portrait vs landscape, but not sure how to translate that into screen size.
Here's my code, any suggestions would be helpful, I've never really touched viewport before:
<meta name="viewport" id="viewport" content="width=520, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<script>
//Code to display on mobiles
//========================================
var swidth = window.screen.width;
//These were the values of my website CSS container for portrait and landscape
var vpwidth = 520;
var vlwidth = 520;
updateOrientation();
window.addEventListener('orientationchange', updateOrientation, false);
function updateOrientation() {
var viewport = document.querySelector("meta[name=viewport]");
switch (window.orientation) {
case 0: //portrait
//set the viewport attributes to whatever you want!
viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=0.6, maximum-scale=0.6, user-scalable=no;')
break;
case 90: case -90: //landscape
//set the viewport attributes to whatever you want!
viewport.setAttribute('content', 'width=' + vlwidth + ', initial-scale=0.9, maximum-scale=0.9, user-scalable=no;')
break;
default:
//set the viewport attributes to whatever you want!
viewport.setAttribute('content', 'width=' + vpwidth + ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no;')
break;
}
//alert(swidth + ' lead to an initial width of ' + vpwidth + ' and a rotate width of ' + vlwidth);
}
</script>
Aucun commentaire:
Enregistrer un commentaire