Scale website to mobile devices

I am not sure exactly what you are trying to achieve, but with the following html

<meta name="viewport" content="width=1280, initial-scale=1">

and the following JS

var siteWidth = 1280;
var scale = screen.width /siteWidth;

document.querySelector('meta[name="viewport"]').setAttribute('content', 'width='+siteWidth+', initial-scale='+scale+'');

you should be able to show the page initial zoomed in or out on mobile devices. You would have to check the device was in portrait. For landscape you would need to use screen.height as opposed to screen.width

For me I create a css-layout file link it to my html file and query every width or you could learn bootstrap and your site will be mobile ready without doing what I do (bootstrap is a pain to edit js for me) As far as querying this is how I write it out

in your html

<meta name="viewport" content="width=device-width, initial-scale=1.0, 
user-scalable=no">

then in your css

@media only screen and (device-width: 1280px),
only screen and (max-width:1280px) {
.css-element {
yourcsscode:;
}
   }

I would just write it out however you want your css for your webpage then build the dimensions like what is shown above also lets say you wanted an menu bar to appear you can create a css for the main nav then use @media then change the css for that nav to make the menu bars appear.

also

.css-element{
display:block;
}

and

.css-element{
display:none;
}

Are really helpful when querying

There are different ways of designing a responsive website.

CSS Media Query.

          /* For mobile phones: */
          [class*="col-"] {
        width: 100%;
           }
          @media only screen and (min-width: 600px) {
         /* For tablets: */
       .col-m-1 {width: 8.33%;}
       .col-m-2 {width: 16.66%;}
       .col-m-3 {width: 25%;}
       .col-m-4 {width: 33.33%;}
       .col-m-5 {width: 41.66%;}
       .col-m-6 {width: 50%;}
       .col-m-7 {width: 58.33%;}
      .col-m-8 {width: 66.66%;}
      .col-m-9 {width: 75%;}
      .col-m-10 {width: 83.33%;}
      .col-m-11 {width: 91.66%;}
      .col-m-12 {width: 100%;}
         }
        @media only screen and (min-width: 768px) {
      /* For desktop: */
      .col-1 {width: 8.33%;}
      .col-2 {width: 16.66%;}
      .col-3 {width: 25%;}
      .col-4 {width: 33.33%;}
      .col-5 {width: 41.66%;}
      .col-6 {width: 50%;}
      .col-7 {width: 58.33%;}
      .col-8 {width: 66.66%;}
      .col-9 {width: 75%;}
      .col-10 {width: 83.33%;}
      .col-11 {width: 91.66%;}
      .col-12 {width: 100%;}
         }

View port.

   <meta name="viewport" content="width=device-width, initial-scale=1.0">