By default, a mobile browser will render a web page the same as a desktop browser. To optimize how your consumers view your Support.com Cloud Self-Support content, your web application needs to inform the browser that the page it is about to render is designed to scale the view based on the display of the device. This is achieved by specifying the doctype as HTML, applying some simple CSS, and most importantly using the viewport <meta> tag in the <head> tag of the parent HTML page. The code should look something like this:

          

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">

    <style type="text/css">	
        html, body {
	    width:100%; 
	    height:100%;
        }							
    </style>
</head>

<!--- rest of the document -->

</html>

         

 The viewport meta tag instructs the browser to do the following:

  1. The width of the viewport inside which the page will be render must assume the device's width. This is required.
  2. The initial zoom-level of the document should be 1.0 or 100%. This is optional but recommended.
  3. The minimum zoom-level of the document should be 1.0 or 100%. This is optional but recommended.
  4. The maximum zoom-level of the document should be 1.0 or 100%. This is optional but recommended.
  5. The user cannot zoom the page in or out. This is optional but recommended.

 

For more detailed information on viewport meta tag optimizations, please see https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag


Still need help? Contact us for further assistance with your Cloud SDK for JS implementation at help@support.com.