I have just make a responsive design, but there are 2 mistakes. One that when window is resized to different size, entire website will automatically resize, but Heading title and slider doesn't resize. But if i reload it, it will resize.
I have made different css rules of font sizes and slider height, which don't work without reload. You can see online website at: http://www.itmediagroup.lt you see slider, change window size, then u will see a problem, when reload website, and see all changes, I think all bugs are on my css, but i dont know how to fix it.
P.S fontsize i was trying to do in percent, but then the size of font is too small.
You can either set font sizes for elements using media queries, javascript (fittext.js) or you can use css viewport units. For example;
Viewport unit syntax
1vw: 1% of viewport width
1vh: 1% of viewport height
1vmin: 1vw or 1vh, whatever is smallest
1vmax: 1vw or 1vh, whatever is largest
It is supported by most new browsers but can be made more "bulletproof" by using VminPolly
Some good info and examples here
Related
I know that width & height in HTML are presentational attributes, getting overrode by any other styling declaration. Still, they help browsers to reserve some space during image loading phase, and thus prevent layout shift.
<img src="kitten.jpg" width="XXX" height="YYY">
But... what exactly should I put there, in fluid layouts? Let's say I have an image, that is 100% wide on mobile resolutions. Then, on small tablets it gets fixed width 200x400px. On normal tablets and small desktops it has 800x400px, and on desktops and up it gets fixed dimensions of 1000x500px.
Which should I pick, so it works as intended and indeed prevents layout shifting - instead of, perhaps, creating new shifting problems?
Using a relative size will change its size based on screen resolution, so it would be best to use percentages. You can also use the max-width property to make it so it can't go over a maximum size.
I know we can make horizontally responsive content in ionic 2. What i want to know is how to make pages height responsive for all type of screens for example if a screen cover whole area on iphone 5 then it should cover whole height wisie area in iphone 7 also ? whats the best approach to achieve this ?
As some have already mentioned, you can use vh for the height property on your css. The catch here is that the viewport may change even if the screen orientation stays the same. This happens when you place an input in your app and it gets focus. The keyboard of the mobile device pops up on the screen, and the height of the viewport changes because the keyboard took part of it. f your mobile screen is 430x710 (some random number here) 1vh would be 7.1px, but when you tap on an input and lets say the keyboard is 430x300, now 1vh will be 4.1px (( 710 - 300 )/100)
That could be a real problem with responsive design. My advice is to use vw, the only thing that might alter it is the screen orientation (you can lock it). The extra step is that you have to use conversion to get the right number in vw that you wanted previously in vh.
I hope I have understood your question correctly, you want to make the page height the same as the height of the device viewing it?
Well, let me introduce you to....
viewport height (or vh)
One vh is equal to 1% of the height of the viewport. So, as you can probably imagine, 100vh would be equal to 100% of the height of the viewport! The viewport is basically the view of the page. However beware, the vh unit is not support in Internet Explorer 8 or earlier.
I hope you will get good idea to make the responsive properly from the follow parameters.
vw: 1/100th viewport width
vh: 1/100th viewport height
vmin: 1/100th of the smallest side
vmax: 1/100th of the largest side
Actually vh is a perfect solution to make the responsive based on viewporot. The viewport is the area where the browser renders the site. This is your screen minus the reserved space of the browser chrome. Sometimes you want to size an element based on that viewport, like a sidebar. This can be done using a unit we’re all familiar with: percentages.
On a number of good websites, I see that the page loads so that the content is the same width as the browser.
Specifically on iPad: If you rotate the screen after page load, and zoom out, the content seems to resize in width to match the screen width again.
What is the "trick" to achieve this? I don't want to use the "width:100%" technique, because I would still like the page to be able to "zoom in", where you then you have to pan/scroll to see the rest of the content.
Sites like what you are describing are NOT using fixed widths, so setting a width on your elements will not let them to fill the entire screen.
If you want to create flexible and fluid layouts, you DON'T want to do this in your CSS:
.yourcontent {
width: 55px;
}
You would want to create your elements with percentage based layouts, or viewport based layouts.
You can play around all day trying to get a fixed width to look just right, but if you change your browser, you of course don't get any responsiveness.
Using something like:
.yourcontent {
width: 50%;
}
will set to only use 50% of the screen width, no matter the browser sizing.
Using VH and VW (viewport height, viewport width) are preferable to using the fixed widths. Fixed widths can be changed depending on screen sizes using media queries, but this is essentially a waste of time and bootstrap will take care of (most) media queries for you.
example:
.yourcontent {
width: 50vw;
}
Check out the bootstrap documentation of the CSS to see how this is achieved: http://getbootstrap.com/css/
You can still zoom in using a library like bootstrap.
I found a solution to my problem. I know its probably not A+ practice, but it seems to work. I basically use fixed widths for elements in the roughly "desktop/tablet" size mode, but I set the width using jquery on (page load/screen rotate), like this: $("myselector").width(newSizeWidth); where the width is based on:
$(window).width();
However, I do use % layouts for roughly smartphone screen sizes, in the same webpage. I conditionally .show() the smartphone div's (that use % layouts), and then I hide the "desktop/tablet" div's (that use fixed sizes).
I use the following in the Head portion for mobile devices:
meta name="viewport" content="width=device-width, initial-scale=1"
BUT
For smartphones with smaller screen sizes, where I don't want zoom function, I change it in the document ready function with:
viewportmeta.content = 'width=device-width, initial-scale=1,user-scalable=no';
Quick Overview of my Problem:
I made a site for mobile, it looks great. Move on tablet it looks horrible. As in it's like 5x stretched out from left and right. Imagine your face stretched horizontally up to 4ft.
Research and Possible Solution
I had a feeling i could viewport. As I thought, if i could just SCALE the layout instead of having browser provide more width and then my layout spreading to accommodate.
Article told me that if i set viewport meta tag width=300 or anything custom then browser scales whole page to fit the current viewport's actual width so 300px would be covering 1200px, at least that's what my impression was.
However, it DIDN'T work. No matter what viewport settings I do they appear to have no effect on scaling.
What i want
I want my page to scale up. I don't want to specify every border width in em units than create dozen media query checkpoints to increase font size. Especially since my layout remains the same only it needs to scale up.
If i was going after different layouts then obviously i'd've used media queries.
I've tried this:
<meta name="viewport" content="width=300">
I solved it using some javascript
first add (i'm using jade)
meta(id="myViewport", name="viewport", content="width=device-width")
Now window.innerWidth will give correct browser width and not some arbitrary number set by browser like 960 which was being reported by chrome on 360 width phone and 2100+ tablet.
Now just check if screen is wide then limit the viewport's width that way browser will scale it up so, for my tablet, 500 pixels will take up 2100 pixels.
if (window.innerWidth > 450) {
var mvp = document.getElementById('myViewport');
mvp.setAttribute('content','width=500');
}
//- first set device width so window.innerwidth shows actual width then change accordingly.
I have set the height and width of my parent div to:
width:1060px;
height:650px;
Which gives me an appearance as far as its size in Chrome on my 720 laptop but when I plug the 1080 TV through the HDMI it's too little on the screen.
I wonder if there is a way to resize the parent div to keep the same distance I get from top/bottom/right/left for 16:9 ratio.
Yes, you need to trigger a resize on the container each time on orientation change with js, then calculate your designed width height aspect ratio, then resize your container to screen.height, then multiply your screen height * your desired aspect, then that result is your width, then check if your width is not minor than screen width, if not is good, if true make the same but in backwards, dividing screen width / desired aspect ratio. lastly center your container in the screen with js or css.
that is the idea, i know works because i ve done it, probably there will be an easy way to accomplish the same.
In this way you can build percentually inside the container and will allways look the same in any kind of stuff, the only change will be a strip on the width or height depending your aspect ratio and your device specs, but it will be allways at biggest possible way.
EDIT,
Is something like;
var ratio = 1060/650;
$(window).on('resize', function() {
$('#container')
.css({width: screen.width + 'px', height: screen.width*ratio + 'px'});
if ($('#container').height() > screen.height) {
$('#container')
.css({width: screen.height/ratio + 'px',height: screen.height+'px'});
}
$('#container').css({left: (screen.width - $('#container').width()) / 2+'px',
top: (screen.height - $('#container').height()) / 2+'px'});
});
In jsfiddle wont be nice as this is using screenwidth (you could also use innerHeight, depends if you are going full screen).
Didnt test it but thats the general idea
What you want is a responsive design. In order for your page to resize, you have to start using percentages instead of fixed widths.
For example, change your width:1060px; to width:90%;. The height can stay the same, but if you wanted it to get taller, you can set height:100% and that adjusts according to the content on the page.
Also, instead of using px for text-size, use em. em is like percentages for text.
Here is a great tutorial that helped me a lot with responsive design.
Use CSS media Queries to specify styles for different screen resolutions & sizes. Your browser will choose the respective style depending on the size of the view port.
Read more about that here -> https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries