title: How to set viewport values for a specific elements in HTML5?
body: <p>I am worried about this.. I am developing one app which has some viewport values for page(Call background image) but I want to set the viewport values for a particular elements only. For example in the page there is background image and some buttons and some tags(text), I want to apply viewport values for background image only NOT for buttons and texts in that page. 
  One more problem is when I click the reset button then all viewport values should assign to initial values. Its working but only for one click after that its not working.
  Here is some piece of code which I have seen while searching </p>
  
  <pre><code>&lt;meta name="viewport" content="user-scalable=yes, initial-scale=1.0, maximum-scale=2.0, 
  minimum-scale=1.0, width=device-width, height=device-height, 
  target-densitydpi=device-dpi" /&gt;
  </code></pre>
  
  <p>Code for resetting the viewport values</p>
  
  <pre><code>   function setOrCreateMetaTag() {  
  // alert("Reset");
  if (window.innerWidth &lt; 500) {
      console.log("Small Devices[setOrCreateMetaTag()]");
      meta.setAttribute("name", "viewport");
      meta.setAttribute("content", "width=device-width, "
              + "initial-scale=0.75," + " minimum-scale=1.0,"
              + " maximum-scale=1.25");
      head.appendChild(meta);
  } else {
      console.log("Large Devices[setOrCreateMetaTag()]");
  
      meta.setAttribute("name", "viewport");
      meta.setAttribute("content", "width=device-width, "
              + "initial-scale=1.0," + " minimum-scale=1.0,"
              + " maximum-scale=1.75");
      head.appendChild(meta);
      document.getElementById('background').src = 'img/bgImg.png';
  
  
  }
   }
  </code></pre>
  
  <p>Please anybody help me. Thanks</p>