Reputation: 13555
I would like to create a website that is not responsive, but if the windows are resized, everything is scale up / down, and keep the same ratio. It doesn't matter if the words are too small in small screen, the first priority is to prevent the element overlap when resize
I have tried using:
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
And
<script type="text/javascript">
$(document).ready(function () {
$(window).resize(function () {
calculateNewScale();
});
calculateNewScale(); // if the user go to the page and his window is less than 1920px
function calculateNewScale() {
var percentageOn1 = $(window).width() / 1920);
$("body").css({
"-moz-transform": "scale(" + percentageOn1 + ")",
"-webkit-transform": "scale(" + percentageOn1 + ")",
"transform": "scale(" + percentageOn1 + ")"
});
}
});
And also with CSS
body {
width:100vw;
height:100vh;
}
The website is here:
kotechweb.com/new_focus/page/about_us
The problem is, right now the content is overlapped when resized.
Upvotes: 21
Views: 29484
Reputation: 482
Using pure transform: scale(x), you are going to run into a lot of margin, centering, and positioning issues, unless you compensate with some javascript logic.
Some CSS things you can do:
1) You can make the main background scale based on browser width by applying
body {
background-size: cover;
background-repeat: no-repeat;
}
2) You can make all measurement units based on vw units similar to this:
Font scaling based on width of container
for instance, if you want your fonts to scale proportionate to your width, you can set
body {
font-size: 0.835vw; //around 14px at 1920px
}
Another example is if you want a container that is 300px high at 1920px width to scale based on width, you can make that container
.container {
height: 150vw; //around 300px at 1920px
}
Presumably you are not trying to keep the footer at the bottom at all sizes? Otherwise you can just use position:fixed; on the footer.
Also, if you keep a fixed aspect ratio, you are going to have very funny spacing if the browser height is taller than the width. Are you sure this is what you want?
Keep in mind, this is a very odd way to resize content which could result in performance and readibility issues (which you are aware). Most people would recommend just using a meta tag for devices, or making your elements responsive.
Upvotes: 1
Reputation: 518
Your viewport tag is wrong, should be <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
But maybe <meta name="viewport" content="user-scalable=no" />
will work.
Upvotes: 2
Reputation: 2258
<meta id="meta" name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
works only when the window is loaded not re-sized
calculateNewScale() function just tries to resize the body Your font size are set in px - change them to % or rem
I know you dont want the site responsive but setting CSS media queries can help with what you want.
Upvotes: 4
Reputation: 43
you can use for make response
1.width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device). 2.initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser. e.g. meta name="viewport" content="width=device-width, initial-scale=1.0"
some additional rules: 1. Do NOT use large fixed width elements 2. Do NOT let the content rely on a particular viewport width to render well 3. Use CSS media queries to apply different styling for small and large screens
also you can use media property and apply screen wise css.
Upvotes: 3
Reputation: 1872
If you are using bootstrap, you could simply change your container class to class = "container-fluid"
Upvotes: 2
Reputation: 176
There are few things you can do: 1. change your HTML layout. Put image, content and footer within a container or wrapper like
<html>
<head></head>
<body>
<div id="wrapper">
//everything goess inside here
</div>
</body>
</html>
use rem/em instead of px. You haven't used rem/em/vw consistently. Meaning, for left-margin you have used 50px. And there will be time when it will cause word shift.
your tag includes bootstrap. If you are using bootstrap....then you are better off using BootStrap Grid. I would first build a page for mobile viewing and then I will use same layout for bigger screen.
good luck.
Upvotes: 2
Reputation: 1814
The view port:<meta name="viewport" content="width=device-width, initial-scale=1">
. This will make the browser render the width of the page at the width of its own screen.
This article gives more information for the viewport meta tags:
https://developer.mozilla.org/en/docs/Mozilla/Mobile/Viewport_meta_tag
Upvotes: 12