Reputation: 51
I have a page that looks terrible below 500px width. In mobile devices less than 500px width, is there any way to automatically set the initial scale meta tag to fit the width of viewport with width of body?
I have already tried to set min-width of body to 500px, but clearly, that would have to be zoomed out manually to see the full page on screens less than 500px width.
Upvotes: 4
Views: 1146
Reputation: 61
You can use JavaScript. Did you try something like this?
<meta id="viewport" name="viewport" content="width=device-width, initial-scale=1">
<script>
window.onload = function() {
if (screen.width < 500) {
var metaViewport = document.getElementById('viewport');
metaViewport.setAttribute('content', 'user-scalable=no,width=500');
}
}
</script>
Upvotes: 1