Scale website to mobile devices

Question

I have a web app where responsive layout is not an option for mobile devices, so I tried playing with the viewport scaling a bit but had no success in doing so.

Page size is 1280x720 so on small screens it should be zoom out and on larger ones zoomed in:

var scale = $(window).width() / 1280;

$('head').append('<meta name="viewport" content="width=device-width, height=device-height, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

I've only tried this for width but the result is not the desired one, am I doing something wrong?

Answer 1

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

Answer 2

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

Answer 3

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">

Answer 4

Instead of $(window).width(), try window.outerWidth. Also, use your preferred width in pixels instead of device-width. So the code becomes:

var scale = window.outerWidth / 1280;

$('head').append('<meta name="viewport" content="width=1280, initial-scale=' + scale + ', maximum-scale=' + scale + ', user-scalable=0">');

It works on mobile versions of Chrome, Opera, and Firefox. Let me know how it works for you.

Answer 5

Calculate width dynamically using window.innerWidth & window.outerWidth properties.

Answer 6

Applying bootstrap.

Try to use col-xs (col-xs-4 to col-xs-12) to all your div classes and give your elements a fixed width/height using css media queries.