How to set screen resolution for all screens like desktop, laptop, etc,. in parallax movement.
I am currently working on a parallax website. I have a problem to set the screen resolution for all screens. I want to put several images in the background. The width of every image is 5212px.
You want to set the width of the images as a percentage rather than a width. If you set the width to 100% rather than 5212px for example then no matter how much you zoom in or out and resize the window the image will always be 100% of the window size.
Related
I have just started web developing a few months ago and I designed my websites. You can look: WEBSITE
Height of containers on my screen are not same on other computer screens. I know it's due to screen height. But i want my website the look exact as it looks on my screen on other screens. So my question is how to do that. Here a screenshot from my screen:
I noted that when i open my website on some of my friends laptops and computers, the height of containers are different but actually there are not different. Its screen resolution. So, finding a solution for this.
I looked at the code of your site and the containers you have 250px height and 33% width. Your images are set to have 100% width and height and overflow is set to hidden. This means that your images will be stretch and shrink depending on the screen resolution. What you want to have is width: 100% and height: auto on images. And your containers around images shouldn't have overflow: hidden and height: 250px.
I'm using the picture element with srcset so the same image but with different resolution is downloaded based on the device screen size.
It's max-width: 100% on the image's styles so when it downloads it forces the content below to move.
Is there any way to tell the browser to reserve that space using CSS when using srcset?
I'm also interested on a JavaScript answer if it's not possible.
Thanks.
You could set the image height based on the image width. So the only thing you need to know is your cameras aspect ratio. If the images have different proportions, weve got a problem...
ratio=9/16;
window.onload=window.onresize=function(){
Array.prototype.forEach.call(document.getElementsByTagName("img"),function(img){
img.height=img.width*ratio;
});
};
What I want to is set <body> to be 100% width and height (or viewport width / height), but when the user zooms, either via pinching on mobile or numerous methods on a desktop browser, I want the viewport to scale with the zoom. So where as body used to be the size of the viewport, if you zoom in 2x, I want the viewport to be 2x bigger.
One possible solution would be to measure the viewport in javascript on load and then set body to be those dimensions, then it would scale the way I desire. I could then put more hooks into viewport resizing to get it to appear the correct size, but it'd be nicer if there was a css / html solution, even if it doesn't necessarily work on all browsers.
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;
im using 960 and i want to adjust the nr of columns depending on the user's screen size.
how do javascript/jquery get the resolution of the screen?
screen.width will tell you the screens width. Or maybe screen.availWidth would be better. Note also that with jQuery you can get the $.width() and $.height() of items: $(window).width() for instance will tell you how wide your window is.
I would argue that screen size doesn't matter. What matters is how wide their viewport for your page is. They could have a 3000px across screen, but be viewing your page with only 1000px wide browser window.
In jQuery you can get the viewport width like this:
$(window).width()