How to scale the viewport to a minimum width - javascript

Problem: I have a page that looks terrible <480px and doesn't display enough relevant information to the user.
Attempted Solutions:
(ex. 320px screen) set the initial scale to 1.5, but then I need to set the scale accordingly for all the screen sizes between 320-480px.
(ex. 320px screen) set the width of your viewport to 480px, however this makes you need to scroll around the screen instead of zooming out like setting the scale would do.
Question: What it seems I need is a combination of the two solutions. One that will scale my viewport, but only until it shows a min-width such as 480px worth of content on the screen. Is this possible without javascript or is solution #1 what I would need to do?
Other considerations: Solution needs to work on all browsers/mobile (IE11+)

I'm not 100% sure what you are trying to do but if I understand correctly, you can set this in css. Setting the width to 100% will keep it flexible to your viewport window & setting a minimum width will not allow it it get any smaller than that.
html,body {
width: 100%;
min-width: 480px;
height: auto;
}

Have you attempted to use media queries ?
For example:
#media screen and (min-width: 480px) {
body {
background-color: lightgreen;
}
}

Related

Why are my HTML elements moving around depending on screen size or zoom?

My HTML and CSS elements are moving around depending on the screen size or zoom of a page. I have screenshots of this example.
This is what it ends up looking like
What it SHOULD look like
If your HTML and CSS elements change with the screen size you can either write media queries or try putting your CSS in terms of percentages rather than pixels. For instance given this CSS code:
.some-class {
width: 300px;
padding: 25px;
margin-top: 10px;
}
All of those measurements in px are going to look very different on a phone screen vs a laptop screen because 300px is about 1/2 the width of a phone screen but only about 30% of a laptop screen. Rather than specify width in px, we can say we want some-class to take up a certain percentage of the screen like this:
.some-class{
width: 30%;
}
Or like this:
.some-class{
width: 30vw;
}
For the padding and margin we can write a media query, which changes the CSS according to screen size. Assuming our original code is for a laptop and we want to make it fit on a phone screen we can add the following to our CSS stylesheet:
#media screen and (max-width: 480px;){
.some-class {
padding: 15px;
margin-top: 5px;
}
}
This overwrites the original CSS if it detects a screen smaller than 480px across. It's worth knowing how to write media queries anyway in case something that is horizontally aligned on a laptop should be vertically aligned on a phone so here's a helpful link.
https://www.w3schools.com/Css/css3_mediaqueries_ex.asp

Slider has no height and doesn't display unless I set hardcoded height

I'm trying to create a slider component from zeto to use on my project. The problem I'm currently facing is that the slider has 0 height unless I set hardcoded height like height: 50rem;. I can't spot what's cauising this or why.
You can find working code snippet here: https://jsfiddle.net/fj640arc/1/
You should remove height: 50rem; on .slider CSS class to see how it looks. I shouldn't hardcode an height for sliders.
Also any help help would be appreciated on responsive images for this slider. How can I improve this slider images to be able to fit on the slider properly and not break it?
Thanks!
If you are looking to add responsive height sizing, try changing the height to use vh instead of rem. For example, you could use:
.slider {
max-width: 114rem;
height: 50vh;
position: relative;
box-shadow: 0 0.6rem 1.2rem rgba(0, 0, 0, 0.15);
}
vh stands for viewport height, and setting it at 50 will ensure your slider will always be at 50% of the height of the screen regardless of the particular dimensions of the screen.
If you are looking to implement responsive design further, you will need to consider various screen sizes.
Meta Tags
Including a meta tag will help you set the zoom level and adjust depending on the screen dimensions. The following meta tag is probably what you are looking for, but read more online:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
The 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).
The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.
Grid Layout and Flexbox
Next, I would look into how you lay out your screen. Two very great ways of doing this is by implementing grid layout or flex-box. W3Schools provides great information on these two techniques.
Media Queries
Finally, you can also include media queries to use certain CSS code depending on the screen dimensions. For example, this CSS code will run if the browser is 600px or smaller:
#media only screen and (max-width: 600px) {
body {
background-color: lightblue;
}
}
You can use vh, em, and rem in your media queries as well if pixels are not what you would like to compare against.
When you position items, you take them out of the document flow.
You have to remove the
position: relative; declaration in the slider__item-list

Chrome for iOS vs. <style>height: 100vh;</style>

Chrome for iOS hides its address bar when the user scrolls up. This feature does not work well with 100vh (or any vh unit) because as the toolbar shrinks, the viewport height changes and thus the size of the element changes. I have a cover image with 100vh and it causes a very noticeable jitter as the length of the entire page grows or shrinks.
The problem exists for any height set with vh, I think.
I can (and probably will) resort to javascript to set my cover image height, but I'd prefer to use vh.
Any clever ideas?
I'd recommend using 100% instead of 100vh - you can add this...
body{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
From there, any element without another wrapper that has its own height will be able to fill the full screen just using width and height at 100%. Example below!
https://codepen.io/will0220/pen/KXqoGZ

How to make div 10% of device screen height css

What I am looking for is a CSS equivalent of jQuery's $("div").css({"height":screen.height/10})
I have heard of CSS media queries and I like them, but I don't know of anything that could even do something even close to that. I know how to use min-height query:
#media (min-height: ... /* some height */){
div{
height: ... /* 'some height' divided by ten */
}
}
but it only gets 10% height of the browser window (not what I'm looking for!).
And I can't just simply use height: 10% because the div is nested in another element that has a set height in pixels.
I also can't use height: 10vh because the viewport's height is not at all the device screen's height (tested in Chrome and IE; If you want proof, resize the window. You'll notice that the height changes as the window's height changes)
NOTE:
I am asking that the div be 10% of the device screen, meaning that if the computer's monitor (the device screen) has a resolution of 1280px by 800px, then the div should be 10% of 800px, which is 80px. Also, if the window resizes, the div's height should not change, because even though the window is resizing, it is impossible to resize the physical computer monitor or phone screen
It's not entirely clear what you are referring to but there IS a CSS property for this.
It's the vertical height unit (vh)
Each vh equates to 1% of the vertical height of the screen / viewport.
JSfiddle
CSS
div {
background: red;
height:10vh;
}
CanIUse reference
MDN reference
You can use min-device-height instead of min-height:
#media (min-device-height: ... /* some height of the screen*/){
div{
height: ... /* 'some height' divided by ten */
}
}
This also applies to the other dimensional queries such as:
min-width -> min-device-width
height -> device-height
width -> device-width
for more visit Mozilla's guide for CSS queries.
Use window.innerHeight:
document.getElementById([DIV ID]).style.height = (window.innerHeight / 10); // Gets window height.
window.onresize = function() { document.getElementById([DIV ID]).style.height = (window.innerHeight / 10);
See here: https://developer.mozilla.org/en-US/docs/Web/API/Window.innerHeight

How to make the page to fit screen width on mobile device?

I have the one form page. I need this form scaled and fit to screen width on any device (Android, iOS, ...). How can I do it with HTML or CSS? style="width:100%" is not a solution in my case.
Thanks!
Why is width:100% not an option?
You can use media queries to target different screen sizes like so:
form {
width: 800px;
}
#media only screen and (max-width: 800px) {
form {
width: 100%;
}
}
The above code would make form 800px wide on any screen wider than 800px, and if it is displayed on a screen size equal to or below 800px wide it will be 100% instead. You can use as many of these as you want, so for instance you could put another media query after this for max-width: 500px and change the form styles accordingly for screen sizes 500px and below.

Categories