How to Scale a Website for Mobile Devices

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

How to scale a website for mobile devices?

Android automatically adjusts to the size of your site, try to use width:100% or smaller than around 310 pixels (scrollbar takes space) for normal viewmode.

For IPhone try using this code to force the correct size

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

Also to force font-size try to use this code in your css:

-webkit-text-size-adjust: none;

Making my website scale able to mobile devices

I would recommend reading through this wiki on W3Schools.

Essentially what you need to do is look into media queries in CSS, as that allows you to set different styling for when the screen is at a certain size.

You can also check out this example of a responsive header. A responsive design without using Bootstrap or a framework is possible using media queries.

How to scale an entire webpage down to ipad or phone size

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1"/>

This will give you the scaling you're looking for.

How to scale a website so that it show same visible area for all viewports?

The solution down below works, but you need to consider removing scrollbars or make fine adjustments to add scrollbars to scale.

<body>
  <div class="container">
    <!-- All other elements should be here -->
  </div>
</body>

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.container {
  width: 1366px;
  height: 768px;
}

const siteWidth = 1366;
const scale = window.innerWidth / siteWidth;

document.querySelector(".container").style.transform = `scale(${scale})`;

I want my web page to scale down only on Desktop & tablet but not on mobile devices

You can do like this. Its work for ipad to laptop screens. its target the browser screens.

@media screen and (min-width: 768px) and (max-width: 1366px) {
  html {
  zoom: 0.75
 }
}

Or you can use this code. max-device-width is the width of the device's entire rendering area. same as height

@media screen and (max-device-width: 1366px) and (max-device-height: 768px) 
{
  html {
    zoom: 0.75
  }
}

Unwanted scaling on mobile devices

The following tag you use

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

tells a browser about initial scale only. If you add maximum scale info, it should work properly:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0, minimal-ui">

Let me know if it works for you