Website scaling to mobile devices

Question

I have a web application in which a flexible layout is not an option for mobile devices, so I tried to slightly increase the size of the viewport, but was not successful in this.

The page size is 1280x720, so on small screens it should be reduced, and on large - increased:

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 just tried this for width, but the result is not desired, am I doing something wrong?

Answer 1

I'm 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 display the start page enlarged or enlarged on mobile devices. You would have to check that the device was in the portrait. For landscape, you will need to use screen.height, not screen.width

Answer 2

For me, I create a css-layout file linking it to my html file and request every width or you could study bootstrap and your site will be mobile without doing what I do (bootstrap is a pain to edit js for me ) As for the request, this is how I write it

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 this, but you want your css for your web page, and then built the measurements as shown above, also lets you say that you want the menu bar to appear, you can create css for the main navigator, then use @media, then change the css for this navigator to display the menu bars.

and

 .css-element{ display:block; } 

and

 .css-element{ display:none; } 

Really helpful on request

Answer 3

Instead of $(window).width() try window.outerWidth . Also, use the preferred width in pixels instead of device-width . Thus, 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 with mobile versions of Chrome, Opera, and Firefox. Let me know how this works for you.

Answer 4

There are various ways to design a responsive website.

CSS Media Request.

  /* 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 5

When I tried this with Chrome devTools, the scale variable turned out to be about twice as correct. Division by 2 fixed the problem for me:

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

Answer 6

Dynamically calculate width using window.innerWidth & window.outerWidth properties.

Answer 7

The use of bootstrap.

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