I develop a mobile version of the site. In accordance with the principles of responsive design block size is a percentage.
html, body{
width: 100%;
height: 100%
}
What or when the input box has focus virtual keyboard appears. Since the decreased height of the screen, the size of the other units also decreased (as indicated in percentage of body). How can I avoid this? How can I avoid this? Ie block height must be calculated from the height of the device screen. Thank you.
Is there a spesific reason for having height: 100%? You only need the layout to adapt responsively to the width of the screen while height could very well be height:auto;
Related
Demo
I want to make responsiveness behaviour like at this site.
There is meta viewport content set to width=device-width, initial-scale=1, maximum-scale=1, but if i resize browser vieport size by reducing its width (about 200px width and smaller), content scales proportionally and responsiveness "swithes off".
You can compare this site and jsFiddle demo with picture below. The same text with the same font-size, but scales differently.
UPD
I need to know how can i set 20px font size and it will scale proportionally like without using meta viewport. Try to make a <h1> with meta viewport and without one, you will understand what i mean
Your question is unclear, but assuming you're talking about the fact that on your demo, the content is blocking its resize after a certain minimum width:
It is important to understand the function of the meta viewport.
The viewport is the user's visible area of a web page.
The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.
-Source
This function prevents a user to zoom in or out on your website. The code you give us says that the width of your webpage must be the width of the parent viewport (equal to your browser's viewable area), that the initial zoom has to be 1 (that means no initial zoom is set) and that the maximum scale can be 1 (that means no zooming in allowed).
The fact that your website is responsive until a certain minimum width hasn't any direct link to the meta viewport.
The responsiveness of a website is based on what's called breakpoints in CSS. This gives certain CSS rules based on the viewport properties (in responsive cases: if the screen's width is between a certain minimum amount of px and a maximum amount). According to what I can understand, you actually need to set the CSS min-width attribute to your website's body like this:
body {
min-width: 300px; /*You'll have to set the value you wish here*/
}
The next thing you have to do is choose how you will handle screens smaller than 300px. There are two options after this:
You can choose to force-give your webpage the device's width and prevent horizontal scrolling but this will hide all the overflow. I personally suggest not to use this technique. For doing this, you'll need to hide all html's overflow with this CSS: html {max-width: 100vw; overflow-X: hidden;}.
The other (better) option is to give your webpage the minimum required width. This will allow horizontal scrolling and a better user experience. To do so, use this CSS code: html {min-width: 300px; overflow-X: visible;} (remember to replace 300px with your desired minimum width).
This should be all for now. Remember that there are hundreds of guides for responsive web design available. Hope your issue is solved.
The solution was simple. I needed just set body min-width
I'm trying to build a site with an initial 'landing page' look that you'd then scroll down from to see the rest of the content.
I can easily create a div that will fit the screen on the device I'm currently using, but how can I code for other devices of different screen sizes?
I've tried using '100%' which of course works initially but then continues to fill the screen when you scroll. I've tried defining a specific aspect ratio but again, that will only work for the screen I'm working on.
To be clear, I want the div, or img to fill the screen when a user first lands, then when the user scrolls the div/img should move up with the rest of the page.
I want to achieve this using only HTML or CSS.
Thanks in advance for any tips!
You can use vw and vh on the first <div> to fill the viewport. You can use this for reference: https://developer.mozilla.org/en/docs/Web/CSS/length
This'll do the trick:
.full-page-container {
width: 100vw;
height: 100vh;
}
vw and vh units represent a percentage of the viewport size. Hence 100vh will mean 100% of the viewport height and won't be affected by scrolling.
I am trying to fix the web layout of my web page such that it does not resize or rearrange .
for example , check the page at http://www.boutell.com/newfaq/creating/fixedwidthlayout.html
. On my browser(chrome), when i resize the window along x-axis, the text rearranges to accomodate within viewable area.
On the other hand, http://msdn.microsoft.com/en-us/library/ie/dn255008(v=vs.85).aspx
when i resize the window along x-axis, the text does not rearrange to accomodate itself. I need my web page to NOT rearrange as in the latter case. Not able to isolate the attribute which controls this. I tried position:absolute in the body tag. No luck
You have a fluid layout. All your columns have their width set in percents. So, when the browser size changes, the columns's width changes too. Lets say one of your container has a width of 15%. When the browser window width is 2000px, this container's size will be counted as 15% from 2000px = 300px; on the other device, where width is 1200px, it will be 180px.
The fastest way to fix it to change width to px;
Another way is to set min-width property, - then the container can
act as a fluid, but at some point it won't go smaller. For example:
.columnt {
width: 15%;
min-width: 200px;
}
Hope you get the idea.
Here's the problem, in brief:
We have a responsive layout which scales our images depending on the screen width. For narrow / small screens we adjust to a two column layout; for wider screens or landscape tablets we can comfortably show four columns. All pretty standard.
The images are defined to be 100% of the width of containing element, and have a height of auto. This works fine in all browsers from IE7+.
The problem is that on page load the browser has no idea what height to expect the images to be. Thus there's a lot of reflow/redrawing as each image is loaded. In fact they're mostly square, but there's no way to hint to the browser the ratio of any of them. Because we serve a lot of images, this causes the page rendering to slow down. On a device with lower processing power, e.g. old iPhone, I'm guessing it gobbles up a lot of unnecessary CPU too.
A possible javascript solution would be to inject a rule into the css based on the page size; this will probably involve the entire page being redrawn though. It's not ideal.
My question is: is there an elegant solution at hinting at the aspect ratio of an image, thus allowing the page 'shape' to be more-or-less correct before image load, when using responsive (percentage-width-scaled) images.
Demonstration page here: http://www.partyark.co.uk/christmas-presents.html - try resizing the screen to see the images shrinking/growing. Min size is 145px, max 200px.
There's a pure CSS technique first described by Thierry Koblentz. It's based on a wrapper with position: relative, zero height, and padding-bottom with a percentage size. The percentages of paddings apply to the width of the containing block, so you can achieve arbitrary aspect ratios with fluid layouts. Then you can put your image inside this wrapper, absolutely positioned, with 100% width and height. Example for 4:3 aspect ratio:
.wrapper-with-intrinsic-ratio {
position: relative;
padding-bottom: 75%; /* results in 4:3 aspect ratio */
height: 0;
}
.element-to-stretch {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I know a lot of people ask questions on this, but I have a spacing problem with my divs.
My main div tag of my web page is 1024px. The problem is that on smaller screens part of my
page gets cut off and you have to scroll horizontally. How do I fix that so that the page will
fit in any window? (especially the smaller ones)
I do not want to use the width:100% property cause I already defined the width as 1024px.
Here is my main div tag's properties:
<div id="main" style=" margin: 0 auto; padding-top: 50px; width:1024px;">
my content.....
</div>
A more common width for a Web page is 960px just to avoid the problem you are encountering. Sorry, the only way to fit your page into those smaller screens is to reduce the width for your main div.
If you are using a fixed width, in this case 1024px, you cannot make the page fit in any window.
You should have a read of Responsive Web Design which explains how to incorporate flexibility into your design.
I'm assuming you don't want it wider than 1024px? If so, set the max-width property on it:
#main {
max-width: 1024px;
}
then, it will fit the screen, but not go larger than 1024.