I'm building an alternative to fullPage.js which will fit my needs better, but I'm having some issues getting the sections to stay at 100% height when the browser is being resized.
I have 5 sections that should all be height: 100%, width: 100% at all times. You should only be able to get one section in your browser viewport at a time. I did this using anchors attached to each section id. Then the body has overflow: hidden to prevent vertical scrolling. The sections each contain images that should also take up height: 100% with the width being determined automatically to keep aspect ration of images.
This solution works when I first load the page, but as soon as the browser starts being resized, other sections become visible, and the img's that have a height: 100% become much smaller than the full browser height. Is this is a limitation to CSS, or am I doing something wrong?
Is there a javascript solution to detect browsers viewport, and apply those height and width values to a series of id'?
Here is my codepen.
add this to your HEAD section
<meta name="viewport" content="width=device-width, initial-scale=1">
then in your CSS:
html, body{
height:100%;
}
#-ms-viewport{
width: device-width;
}
Additionally, I'd suggest to use vh (viewport height) and vw (viewport width). Read more here
Related
Let's say my background is an image of a boombox such as: https://ibb.co/hCZSWt2
I have the background image style set to background-size: cover so it will resize properly with the window.
How do I "attach" a button to a part of that background, so that if the window is resized, the button will always remain in the same place, in relation to the background image.
(i.e. if they hit a button on one of the cassette decks, I can make a song play).
Currently, when I use position: absolute I can get it to be placed properly for my screen size, but when I use Chrome's inspector to see the mobile view, that throws off the location of the button in relation to the background. I anticipate this will need to use JavaScript's vh and vw properties to calculate where the button should go on window resize, but if anyone could provide a simple example that would help a ton!
Try using top/left/right/bottom attribute. You can set them to percentages so they should shift with the page resizing. If the discrepancy is too much however, you can use #media to change the css once you reach a certain window size. An example:
#yourbutton{
position: absolute;
top: 15%;/*meaning it's top edge will be 15% of the page height away
from the top edge of the page*/
left: 20%;
/*You may want to set height and width to percentages as well to
make the buttons smaller should the screen size be too small*/
}
/*If the discrepancy piles up too much when the width/height is x
pixels*/
#media (max-width: 900px) {
left: 10%/*or something*/;
}
If the answer worked for you, please consider accepting it!
I am developing a responsive website.
For this website the padding and width of the elements are in proportion of the width and/or height of the web page.
So I have preferred to use the viewport related units (vh, vw).
Everything scaling absolutely fine till the time I got a new requirement...
Now I have to put the max width and height to my webpage. max width of 1366px and max height of 768px.
So I have added max-height and max-width css styles to my html tag.
Web content is now restricted in this range, but still the padding and width is getting calculated considering the whole width and height of the page as viewport.
For eg. if screen width is 1500px then 10vw is calculated as 150px. But what I need is it should not exceed 136.6px as max width is 1366px.
So is there any way to restrict the width and height of the viewport?
Like
<meta name="viewport" content="width=device-width, max-width=1366, max-height=768, initial-scale=1">
If you are required to have fixed sizes for your viewport, there is no point in using viewport-relative measures like vh, in some cases you'll manage to do the trick with percentages, but I wouldn't recomment it.
The best way to do this is to edit the viewport with javascript, there are a couple ways of getting the widths and heights of screens in JS
Again, as #hungerstar mentionned in a comment, it is not recommended to have fixed viewport sizes, so make sure you really have this requirement before you jump into it.
Hope it helps
I have a website that has a lot of components which are animated using JavaScript. The website is mainly targeted at users on a desktop. All of the coordinates for the animations, and all of the sizes for the images, depend on the viewport having a width of exactly 1920px (although it could be any height greater than 1000px and it would work). If the viewport is any other width, the images and the animations look like nonsense due to the change in coordinates.
Is there any way I can scale the viewport such that even if it isn't 1920px wide, all of my coordinates and sizes will still be treated as if it is?
I have tried setting <meta name="viewport" content="width=1920">, using the CSS zoom property, setting min-width: 1920px on the body element, and setting the browser zoom using JavaScript, all to no avail.
Have you tried using "vw" to set the width of your elements?
http://www.w3schools.com/cssref/css_units.asp
"vw" is a length unit of 1/100th of the viewport width.
Try using it like this on your css file:
.yourelement {
width: 30vw;
}
Why don't you set your html/body to have a hard width of 1920px in your stylesheet?
html, body {
width: 1920px;
}
THe thing is we need iframe, so the partner can just add url and we can control what is displayed in it without needing to have their website code.
If not iframe, it looks ok.
But with iframe it is a problem - window height is always bigger than width. And various methods just thinks that its portrait. As I understood the heihgth is how much content there is and iframe does not have scrolls. So iframe for my code is like browser window, not parent real browser window.
There have been various questions, but I still not able to find working solution.
Update:
I found how to make it not go over in height - on window load, take window height and set that height to the div and overflow: scroll. So whole window does not get more high and so iframe does not get so high. On load window height is the initial iframe height. Still not managed yet to detect orientation correctly, because now for some reason when portrait - width is still higher than height, with is 960, at least that what javascript see, but in reality it is not going over boundaries, which are 768px.
Now tried to find out who make it have 960px. And went to this:
function test2() {
?>
<iframe src="" width="100%" height="100%"></iframe>
<?php
}
this is empty content with 100% width, and why it is 960px? Not only for ipad, but using chrome emulation, I see its for other popular mobile devices also.
So if height is lets say 500, and widht is 960, it thinks that its landscappe. But in real ipad does not have 960px width, it has 768. And does not go wider even when javascript detects 960. How can this be?
Update:
To detect widht I use:
$(window).load(function(){
var width = $(this).width();
});
and it gets wider screen width. Maybe iframe is wider and has horizontal scroll, but iPad does not draw a scroll but it is possible to move it horizontally while parent page stays same position.
But just checked with test page iframe - iPad does not let scroll horizontally and page fits in the iframe but still it detects window width 964px, while it should be 768
ALso in the testing page, iframe is in the div, div has style width: 768px !important;
and iframe also has style width: 768px !important;
and still iPad shows width 964 :)
Update:
Currently solved on partner page in hacky way: intially one of the inside divs I make css width: 300px, and then so I get good window widht. Then since I want wide 85%, I multiply widow width * 0.85 and set it to that div which I want to be wider. Earlier I tried to achieve the same with css widht: 85% which caused to become wider than screen. Still this does not make sense, but works.
Use this css on parent container:
height: 500px !important;
width: 900px !important;
overflow: auto !important;
-webkit-overflow-scrolling:touch !important;
I have a website which I want to follow the resizing of the browser window so that it always fits.
I tried using css transform scale property with a ratio given by current window width divided by full-screen window width.
It does re-scale but there must be something wrong with it because it leaves white blocks to the left and the right of the content (so it shrinks the site too much and then centers in in the window)
Here is the javascript code:
$(window).resize(function(){
var ratio = $(window).width()/1340;
$('body').css('transform','scale('+(ratio)+')');
$('body').css('-ms-transform','scale('+(ratio)+')');
$('body').css('-moz-transform','scale('+(ratio)+')');
$('body').css('-webkit-transform','scale('+(ratio)+')');
});
Is there a better way to make the page fit the window (or make the scaling scale properly)?
To make your website mobile friendly, you should really think about making it responsive using media queries or using some front-end framework like Bootstrap, Foundation etc.
Or if you just want to scale your website so it should not horizontally scale and fit to user's screen (No matter how small your UI component become) You can do that by adding following meta tag in your head section.
<meta name="viewport" content="width=device-width, initial-scale=1">
It'll force browser to keep the website scale enough to fit the mobile screen width.
Hope It'll help.
What you're wanting to do is build the website using Responsive and Adaptive methods. See if this link helps! http://www.imediaconnection.com/content/33435.asp#singleview
you can use this, put the whole content inside it
#wrapper{
position:absolute;
top:0;
left:0;
right:0;
bottom:0;
overflow:hidden;
}
Use
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in Html head section and
#media only screen and
(min-device-width : screen px) and
(max-device-width : screen px) {
#id{style}
}
in CSS.