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

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 4

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

Answer 5

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.

Answer 6

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 7

Wow! These answers are really complicated. I’m just a newbie, but I think I found a simple fix. It might take a while (and if you’re almost done with your website, it might take too long to do and you should just follow the other solutions), but it works. Note: This solution, although simple, (obviously) requires a basic understanding of all 3 primary languages for creating websites, JavaScript, HTML, and CSS, since all 3 are used in this solution. First off type this into the head tag in HTML.

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

This basically tells the browser to make sure the width of the viewport (visible area of the website) is equal to the width of the device being used itself. It also tells the browser to have 100% zoom when opening the website, denoted by initial-scale=1.0. The next part is in JavaScript. You need to find the width of the viewport. One method you might be able to use is

console.log(window.innerWidth)

Basically, this returns the width of the viewport in pixels into the console, which can be accessed using Ctrl + Shift + I > “Console” Finally, the long, hard part. This one is done in CSS. You must convert all units on the site. Most of the units you probably use are all in px, or pixels. Pixel width varies with different devices, so, for example, a picture at the complete right edge of a website might show up in a computer, but it might not show up on a phone or tablet because the position in px from the left might exceed its amount of pixels, if that makes sense. Anyway, you can convert px to vw. The vw unit, while px is a fixed unit, is a relative unit. It is relative to the width of the viewport.

1vw = 1% of the width of the viewport

Therefore, all devices have a width of 100vw, even if they all have different pixel widths. So, using this knowledge, you can convert x pixels into this unit using the equation below.

x*(100vw/device width in pixels)

Use a calculator to calculate this. Once all your units are in vw, your browser will position all your elements relative to the viewport, and the look of your website will barely change. Hopefully this helps!