cancel

Change Viewpoint based on Screensize

Written by Tim Butterfield in Web Projects

This little code can be used to change the viewpoint settings based on the screen size.

To use, simply copy and paste the code below and change the viewpoint settings to suit your needs.

    <meta id="viewportdata"/>
    <script>
  if ($(window).width() <= 400) {
     $('#viewportdata').after("<meta name='viewport' content='width=400'/>");
  }
 else {
    $('#viewportdata').after("<meta name='viewport' content='width=device-width'/>");
    $('#viewportdata').attr("content", "width=device-width");
 };

</script>


Use the table below to find the viewpoint settings you require:

Property Description
width Width of the viewport in pixels (or device-width). If width isnt set, it defaults to a desktop size (980px on mobile Safari).
height Height of the viewport in pixels (or device-height). Generally you dont need to worry about setting this property.
initial-scale (0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out
minimum-scale (0 to 10.0) The minimum multiplier the user can zoom out to. Defaults to 0.25 on mobile Safari.
maximum-scale (0 to 10.0) The minimum multiplier the user can zoom in to. Defaults to 1.6 on mobile Safari.
user-scalable (yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to yes on mobile Safari.