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.
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
<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.
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.
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.
If you are using bootstrap, you could simply change your container class to class = "container-fluid"
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.
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.
Related
I read a w3school tutorial about viewport meta tag, so they give 2 examples to explain the usage of the tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The first example one without it shows as expected, while the second example with the tag adjust the image width on smartphones making it 100% the viewport width, witch doesn't make sense to me. Why would setting the virtual width equal to the device width make that kind of adjustment, the image shouldn't normally fit the whole width in both cases as it's set width of 460px is smaller than my device width of more than 1000px and a wider virtual width.
My second inquiry is about initial-scale=1, shouldn't that be the default value, what would be different if we didn't declare it.
Thank you for your attention.
Look at the CSS for that page.
img {
max-width: 100%;
height: auto;
}
The max-width overrides the width.
In addition to Quentin's answer,
If you set the initial scale to "1.0" then the web page is displayed to match the resolution of the target density 1-to-1.
I'm working on responsive design. My goal is to make my website responsive for all sizes.
Generally, I increase the font-size of my elements as the width of the device increases.
But what if the width increases and the height remains the same? I was thinking about this scenario while creating a responsive design.
ex: 400x300 500x300 600x300
In this scenario, as width increases I increase the font-size. But the height stays the same leading to oversized elements because the height stays the same, when the font-sizes are increased.
So as other users have said before what you want to do first is include this meta tag in your html header:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
then you would go to your CSS file and select a certain veiw size.
#media (min-width:300px) and (max-width:400px){
.myClass{
height: 18em;
font-size: 1em;
}
}
This #media allows the CSS to run ONLY when the viewport is within the specified range, in this case between 300px and 400px. You can treat it just as any normal CSS modification, change height, font size, color, background etc. Just remember to open and close your #media with curly brackets{} just like you would when you select an element in CSS.
I use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Hope it helps!
I'm writing a book reader in which a book can be of variable width, for example, it could be 1028px or it could be 2000px or 560px width.
I'd like mobile devices to scale automatically so that when they're viewing the book it will scale the book to always be the width of the screen.
What I'm currently doing is... (example book has 1028px width & 1648px height)
In the head:
<meta name="viewport" content="width=1028"/>
In the stylesheet:
body { margin:0; padding:0; }
.bz { margin:0; padding:0; overflow:none; width:1028px; }
.pz { width:1028px; height:1648px; position:relative; }
And the body is in the form of:
<div class="bz">
<div class="pz">
Page 1 content
</div>
<div class="pz">
Page 2 content
</div>
<div class="pz">
Page 3 content
</div>
</div>
This stacks the pages vertically, which works... except there are two problems:
On mobile device the content doesn't actually fit perfectly on the screen, it needs a little horizontal scroll to view all of it. So basically it's not zoomed perfectly to the width of the device screen.
On mobile device there is loads of white space on the right, the horizontal scrollbar is present and it allows the user to scroll really far to the right into loads of white space. This doesn't occur on the desktop browser which correctly disables the horizontal scroll if the browser window is larger than the content width.
I must be doing something wrong. Any ideas?
Thanks!
wrong approach in my opinion.
the best practice for anything reponsive is
<meta name="viewport" content="width=device-width, initial-scale=1.0">
if you want to adjust the readability of the content, you should think about font-size, not screen-size or "container" size.
you could use em units or rem units and adjust the relative size of your whole reading experience changing one simple value: font-size in body.
by default 1em = 16px = 100% - so you can start with:
body {
font-size:100%
}
through javascript you can change that value to bigger or smaller and your whole content font-size will scale accordingly.
Try this
<meta name="viewport" content="width=device-width, initial-scale=1">
instead of this..
<meta name="viewport" content="width=1028"/>
I'd like mobile devices to scale automatically so that when they're
viewing the book it will scale the book to always be the width of the
screen.
If you want the width to respond to screen width remove width:1028px; from your css. Currently it's saying to always be that wide, never wider and never narrower.
My website is positioned perfectly for me but not for my larger monitor. The div's are more compact on the larger monitor and incorrect. How can I fix this?
You need to use media query for responsive. if you used it, may be your meta tag is not working correctly.
below the examples are.....
#media screen and (min-width:00px) and (max-width:00px){
/*extra style will goes here.
}
Don't forget to use this <meta .../> tag on <head></head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
I believe that you have problems because you hard-coded the sizes.
I'd suggest you to use relative sizes, e.g.:
#el{
width:50%;
height:100%;
}
In the above example, an element with id = "el" will have width which will be half the width of the window and the height of this element will be equal to the height of window (unless this element is located in another element, the width and height of which is less than 100%).
So I'm trying to make my website adjust for mobile browsers. I've got 2 CSS files, one which is always included and one with
media="screen and (max-width:500px)"
To get that to work, I'm using the meta tag
<meta name="viewport" content="width=device-width" />
This works great sa long the content-wrapping divs have a fixed width, or if the screen is less than 500px wide. But when I flip my phone (and thereby get >500px width), divs directly in the body with their width set to 100% get cut off. I'm assuming because width=device-width makes css 100% equal to the screen width, even if the website is larger than the screen.
Proper in a desktop browser (the background is meant to cover the entire document width):
In (flipped) phone or chrome mobile emulation. A large chunk of the menu cuts out.
CSS:
#top{
position:relative;
background:rgba(191,186,130,1);
height:150px;
width:100%;
overflow:visible;
}
Is there any way I can make the div width span the entire document? Do I need javascript to detect this?
Set your initial scale equal to 1.
<meta name="viewport" content="width=device-width, initial-scale=1.0" />