Set minimum content width using viewport meta tag

Question

I need to set the minimum width of the content to 480 pixels so that someone viewing the <= screen will have to scroll the page to view the content. The reason is that it is impossible to make a layout below this resolution.

That's what i

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1"> 

I need something like this, but obviously this does not work.

 <meta name="viewport" content="width=device-width,, min-width=480px, initial-scale=1, maximum-scale=1, minimum-scale=1"> 

Answer 1

It looks like you are trying to set the minimum width of the content on the page, not the view itself. This article can help you out.

You probably want to do:

 @media all and (max-width: 480px) { // styles assigned when width is smaller than 480px; } 

Something like this, in this block you can send styles for content on screens with a width of 480 pixels and below.

Hope this is what you are looking for.

Answer 2

This solution provides a responsive version of the network for tablets and desktop computers only.

This code disables the mobile version dynamically. On a mobile device:

 <!-- Meta Responsive --> <meta id="myViewport" name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <script> window.onload = function () { if(screen.width <= 767) { var mvp = document.getElementById('myViewport'); mvp.setAttribute('content','width=767'); } } </script> <!-- End of Meta Responsive --> 

Answer 3

I tried a lot of codes and achieved good results by loading some viewport ... But I think the best way is to create a full website (up to 320 pixels)

This is the best aproach:

 <script> //VIEWPORT function mobileFriendly() { setTimeout(function () { if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) { var ww = ( document.documentElement.clientWidth < window.screen.width ) ? jQuery(window).width() : window.screen.width; //get proper width var mw = 725; //alert ("width" + ww); var ratio = ww / mw; //calculate ratio //alert ("ratio: " + ratio); if( ratio < 1 ){ //smaller than minimum size jQuery("meta[name='viewport']").attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + mw); }else{ //regular size jQuery("meta[name='viewport']").attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); } } }, 600); } jQuery( document ).ready( function(){ mobileFriendly() }); window.addEventListener("orientationchange", mobileFriendly, false); </script> 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <meta content="user-scalable=yes, maximum-scale=1.6, width=device-width, initial-scale=1, target-densitydpi=device-dpi" name="viewport"> 

Answer 4

Your second solution really works - what you might not have seen is that after width=device-width you have two commas, which is probably due to the fact that you have no work. I copied it and had no problems.

Sometimes fresh eyes do it all.

Edit: However, yes, in your case, the media query is exactly what you need.

Answer 5

 <script> //viewport just for screens under/with 480px width other screen widths show the whole page resized if(screen.width <= 480) { document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} //for devices with more and less/equal than 480px width window.onresize = changeViewport; function changeViewport(){ if(screen.width <= 480) { document.getElementById("viewport").setAttribute("content", "width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;");} if(screen.width > 480) { document.getElementById("viewport").setAttribute("content", "");} } </script>