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!
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've just stated using the viewport unit, not sure how to handle this so any feedback is appreciated.
I've created element
<h4>text here</h4>
added some style
h4 {font-size:7vp;}
This is excellent on mobiles devices, phone and laptops. But once the screen size exceeds that of a laptop to keep up with the viewport width, the height of the text gets two large for the viewport height.
If you know what I mean.
Im looking for something like
max-size:
but more like
max-font-size:
There is no such thing as max-font-size but you can use media queries to detect when the window is now desktop size. For example:
media screen and (min-width: 768px) {
h4 {
font-size: 14px;
}
}
This will override your font-size from vh to px when the window size is larger than 768px.
Note: To use media queries make sure you add this tag in your main html file
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
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.
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" />